0

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

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

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

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

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

2 ответа 2

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>

5
  • Это было бы лучшим решением, но у меня не все импуты должны быть ограничены при вводе...есть рядом текстовые импуты где нужно больше символов вводить.. Их как то можно в вашем коде отделить..? Т.е. в каждом диве два инпута, 1) для ссылки, 2) название ссылки (кнопки).... ограничиваю только название
    – Jandos M
    Commented 25 янв. 2023 в 13:02
  • @JandosM можно проверять input на совпадение селектора, прямо в if'е, чтобы получилось так: if(inp...ase() && input.matches('.moy_textovy_input')), только замените селектор на тот, какой совпадает с инпутом у которого нужно ограничение. Предполагаю что у вас какие-то из этих селекторов: .text > input:first-of-type или .text > input:not(input ~ input), но без конкретной разметки непонятно. Вам стоит опубликовать новый вопрос, где также будет условие ограничивать именно какой из <input>'ов, а сейчас мой ответ полностью отвечает на вопрос.
    – ΝNL993
    Commented 25 янв. 2023 в 13:07
  • @JandosM а на данный момент, прошу отметить лучший ответ галочкой. (Чтобы отметить какой-то ответ галочкой, то-есть как правильный, нужно нажать галочку слева от ответа)
    – ΝNL993
    Commented 25 янв. 2023 в 13:10
  • 1
    Вы правы, я изначально пропустил второй инпут.
    – Jandos M
    Commented 25 янв. 2023 в 13:10
  • ru.stackoverflow.com/q/1489839/535055
    – Jandos M
    Commented 25 янв. 2023 в 13:29
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>

0

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.