0

Для уточнения предыдущего вопроса, здесь код с решением, которое нужно дополнить... есть несколько дивов (здесь привел только два, в каждом по два инпута). Нужно ограничить только инпуты name="btn_name1" и name="btn_name2" в каждом диве.

<div>
    <form method="POST">
      <div class="form-group">
          <div class="input-group">
            <input name="link1" type="text" class="form-control">
          </div>
          <div class="input-group">
            <input name="btn_name1" type="text" class="form-control">
          </div>
       <button type="submit" name="update_telegram" class="btn btn-primary">Сохранить</button>
    </form>
</div>
<div>
    <form method="POST">
      <div class="form-group">
          <div class="input-group">
            <input name="link2" type="text" class="form-control">
          </div>
          <div class="input-group">
            <input name="btn_name2" type="text" class="form-control">
          </div>
       <button type="submit" name="update_telegram" class="btn btn-primary">Сохранить</button>
    </form>
</div>

Решение ниже касается всех инпутов... А нужно чтобы ограничивал только инпуты name="btn_name1" и name="btn_name2" в каждом диве.

<script>    

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

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

</script>

1 ответ 1

1

Решение 1

Как я и говорил вам, нужно использовать метод matches:

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

  if(input.tagName.toLowerCase() === 'input' && input.matches('[name^="btn_name"]')) {
    input.value = input.value.slice(0, 15)
  }
})
<div>
    <form method="POST">
      <div class="form-group">
          <div class="input-group">
            <input name="link1" type="text" class="form-control">
          </div>
          <div class="input-group">
            <input name="btn_name1" type="text" class="form-control">
          </div>
       <button type="submit" name="update_telegram" class="btn btn-primary">Сохранить</button>
    </form>
</div>
<div>
    <form method="POST">
      <div class="form-group">
          <div class="input-group">
            <input name="link2" type="text" class="form-control">
          </div>
          <div class="input-group">
            <input name="btn_name2" type="text" class="form-control">
          </div>
       <button type="submit" name="update_telegram" class="btn btn-primary">Сохранить</button>
    </form>
</div>

Решение 2

Можно также проверять саму строку атрибута, так к тому же будет более компилябельно со старыми браузерами.

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

  if(input.tagName.toLowerCase() === 'input' && input.getAttribute('name').indexOf('btn_name') === 0) {
    input.value = input.value.slice(0, 15)
  }
})
<div>
    <form method="POST">
      <div class="form-group">
          <div class="input-group">
            <input name="link1" type="text" class="form-control">
          </div>
          <div class="input-group">
            <input name="btn_name1" type="text" class="form-control">
          </div>
       <button type="submit" name="update_telegram" class="btn btn-primary">Сохранить</button>
    </form>
</div>
<div>
    <form method="POST">
      <div class="form-group">
          <div class="input-group">
            <input name="link2" type="text" class="form-control">
          </div>
          <div class="input-group">
            <input name="btn_name2" type="text" class="form-control">
          </div>
       <button type="submit" name="update_telegram" class="btn btn-primary">Сохранить</button>
    </form>
</div>

Решение 3

Можно вместо getAttrbiute использовать name, а вместо indexOf(...) === 0 использовать startsWith, вот так:

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

  if(input.tagName.toLowerCase() === 'input' && input.name.startsWith('btn_name')) {
    input.value = input.value.slice(0, 15)
  }
})
<div>
    <form method="POST">
      <div class="form-group">
          <div class="input-group">
            <input name="link1" type="text" class="form-control">
          </div>
          <div class="input-group">
            <input name="btn_name1" type="text" class="form-control">
          </div>
       <button type="submit" name="update_telegram" class="btn btn-primary">Сохранить</button>
    </form>
</div>
<div>
    <form method="POST">
      <div class="form-group">
          <div class="input-group">
            <input name="link2" type="text" class="form-control">
          </div>
          <div class="input-group">
            <input name="btn_name2" type="text" class="form-control">
          </div>
       <button type="submit" name="update_telegram" class="btn btn-primary">Сохранить</button>
    </form>
</div>

Как это работает?

В первом решении я проверял атрибут на наличее строки btn_name в начале (Как и во втором), я это сделал с помощью возможности CSS на поиск элементов с каким атрибутом и с каким-то его значением (и не только, подробней можно ознакомиться здесь).

Во втором же решении, я использовал getAttribute который позволяет получить значение атрибута (в виде строки), а там уже используя indexOf я проверял, равняется ли текущий индекс нулю (То есть начинается ли строка на какую-то другую строку).

В третьем решении я сразу обратился к пропорции name (которая равняется атрибуту name в DOM дереве) и поверил, начинается ли строка на btn_name, уже используя метод startsWith(...) (который эквиволентен записи: indexOf(...) === 0).

3
  • Если мой ответ вам показался полезным и ответил на ваш вопрос, прошу отметить его галочкой.
    – ΝNL993
    Commented 25 янв. 2023 в 13:57
  • 1
    Отлично! Всё работает. Выбрал 2-вариант. Спасибо!
    – Jandos M
    Commented 25 янв. 2023 в 13:58
  • @JandosM не за что! :)
    – ΝNL993
    Commented 25 янв. 2023 в 13:58

Ваш ответ

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

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