Слушатель событий не работает с другими входами
Нет jQuery, пожалуйста, просто чистый JS
У меня есть этот сценарий, который выполняет оператор if, который предотвращает вставку пробела в начало ввода, он работает с первым вводом раздела-1, но не работает с другими входами в этом разделе вызова контейнера-1, так что я ' м я делаю
здесь не так? Я пробовал много методов, но не могу понять этого. Мне просто нужно найти способ, чтобы скрипт работал со всеми входами раздела 1, как я могу это сделать?
Вот мой код
document.addEventListener('DOMContentLoaded',function(){
var trigger= document.querySelectorAll('#section-1 input');
for(var i = 0; i < trigger.length; i++) {
trigger[i].addEventListener('input',noStartingWhiteSpace);
}
function noStartingWhiteSpace(){
var preventWhiteSpaceInput= document.querySelector('input').value;
if (/^\s/.test(preventWhiteSpaceInput))
document.querySelector("#section-1 input").value = '';
}
});#section-1{
background-color: red;
width: 350px;
padding: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
#section-1 input{
display: block;
margin-left: auto;
margin-right: auto;
}
#section-2{
background-color: blue;
width: 350px;
padding: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
#section-2 input{
display: block;
margin-left: auto;
margin-right: auto;
}
#section-3{
background-color: lime;
width: 350px;
padding: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
#section-3 input{
display: block;
margin-left: auto;
margin-right: auto;
}<br>
<div id='section-1'>
<input type='text' placeholder='Only this one works'>
<br>
<input type='text'>
<br>
<input type='text'>
</div><!--</section-1>-->
<div id='section-2'>
<input type='text'>
<br>
<input type='text'>
<br>
<input type='text'>
</div><!--</section-1>-->
<div id='section-3'>
<input type='text'>
<br>
<input type='text'>
<br>
<input type='text'>
</div><!--</section-1>-->
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
В вашем noStartingWhiteSpace вы повторно выбираете элемент. Вы должны добавить e в качестве первого аргумента и использовать e.target.
Например:
function noStartingWhiteSpace(e){
var preventWhiteSpaceInput= e.target.value;
if (/^\s/.test(preventWhiteSpaceInput))
e.target.value = '';
}
Что это должно означать?
@PatrickRoberts некоторые люди хотят использовать this для ссылки на свойство члена, поэтому он не будет работать с .bind.
Совершенно не имеет отношения к рассматриваемому вопросу. По этому аргументу я могу сказать, что вы не можете полагаться на то, что event будет первым аргументом, потому что люди хотят использовать .bind() для добавления параметров.
Спасибо за совет всем, кроме Дэниела А. Уайта, можете ли вы привести пример того, что вы имеете в виду в фрагменте кода? Я лучше пойму, что вы имеете в виду, если вы не против. Если это возможно.
Спасибо, Дэниел А. Уайт. Я предпочитаю ваш ответ и ответ sh78. Пример Патрика Робертса тоже был хорош, но он не попал только в раздел-1, его код закончился тем, что попал во все входные данные в документе, которые я не хочу, мне нужен только раздел- 1, но спасибо Дэниелу А. Уайту за ваш сегодняшний урок, отличное решение.
Патрик меня опередил, но вы можете сделать это и без this:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title></title>
<style>
#section-1{
background-color: red;
width: 350px;
padding: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
#section-1 input{
display: block;
margin-left: auto;
margin-right: auto;
}
#section-2{
background-color: blue;
width: 350px;
padding: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
#section-2 input{
display: block;
margin-left: auto;
margin-right: auto;
}
#section-3{
background-color: lime;
width: 350px;
padding: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
#section-3 input{
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<br>
<div id='section-1'>
<input type='text'>
<br>
<input type='text'>
<br>
<input type='text'>
</div><!--</section-1>-->
<div id='section-2'>
<input type='text'>
<br>
<input type='text'>
<br>
<input type='text'>
</div><!--</section-1>-->
<div id='section-3'>
<input type='text'>
<br>
<input type='text'>
<br>
<input type='text'>
</div><!--</section-1>-->
<script>
document.addEventListener('DOMContentLoaded',function(){
function noStartingWhiteSpace(e){
if (/^\s/.test(e.value))
e.value = '';
}
var trigger= document.querySelectorAll('#section-1 input');
for (var i = 0, len = trigger.length; i < len; i++) {
trigger[i].addEventListener('input', function(e) {
noStartingWhiteSpace(e.target);
});
}
});
</script>
</body>
</html>
Замените
document.querySelector('input')наthis. Ваш слушатель событий всегда выбирает первый найденный в документе.