Решение 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
).