Один обработчик на несколько инпутов, в нескольких дивах с двумя инпутами
Для уточнения предыдущего вопроса, здесь код с решением, которое нужно дополнить... есть несколько дивов (здесь привел только два, в каждом по два инпута). Нужно ограничить только инпуты 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
Как я и говорил вам, нужно использовать метод 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).