Делегирование событий javascript - один обработчик на несколько инпутов

Question

У меня есть 10 блоков див с инпутами

И функция javascript одна и та же на все дивы с инпутами..., котрая ограничивает ввод символов до 15.

<script type="text/javascript">
  let name = document.querySelector('#text1');
  text1.oninput = function(){
  this.value = this.value.substr(0,15);
  }
</script>

Пытался делегировать, перебирать и тд., но не получается, даже код стыдно показывать. Есть ли простое и понятное решение, чтобы был один обработчик на несколько инпутов?

Продолжение вопроса: Один обработчик на несколько инпутов, в нескольких дивах с двумя инпутами

Answer 1

Можно ограничить без JS атрибутом maxlength.. Здесь представлены оба варианта.

let inp = document.querySelectorAll('.text > input');//Выбираем все инпуты

inp.forEach(e=>{
  e.addEventListener('input', maxlength);//Вешаем слушатель на каждый
});

function maxlength(){//Один обработчик для всех инпутов
  this.value = this.value.substr(0,15);
}

<div class='text'>  <input type="text" > </div>
<div class='text'>  <input type="text" > </div>
<div class='text'>  <input type="text" maxlength="15"> </div>

Answer 2

Я бы лично предпочёл делегирование событий:

window.addEventListener('input', e => {
  let input = e.target

  if(input.tagName.toLowerCase() === 'input') {
    input.value = input.value.slice(0, 15)
  }
})

<div class="text">  <input type="text" /> </div>
<div class="text">  <input type="text" /> </div>
<div class="text">  <input type="text" /> </div>
<div class="text">  <input type="text" /> </div>
<div class="text">  <input type="text" /> </div>
<div class="text">  <input type="text" /> </div>
<div class="text">  <input type="text" /> </div>
<div class="text">  <input type="text" /> </div>
<div class="text">  <input type="text" /> </div>
<div class="text">  <input type="text" /> </div>

БЛОГ НА HUSL

Делегирование событий javascript - один обработчик на несколько инпутов

Ответы (2 шт):