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

Рейтинг: 0Ответов: 2Опубликовано: 25.01.2023

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

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

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

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

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

javascript
Источник: Stack Overflow на русском

Ответы

▲ 3Принят

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

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>

▲ 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>