事件侦听器无法在其他输入上工作
事件侦听器无法在其他输入上工作
提问于 2018-06-08 08:38:46
没有jQuery，请只使用纯JS
我有这个脚本，它执行一个if语句，防止在输入的开头插入一个空格，它可以处理section-1的第一个输入，但不能处理该容器调用section-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>-->
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-08 08:40:32
在noStartingWhiteSpace中，您将重新选择该元素。您应该添加e作为第一个参数并使用e.target。
例如：
function noStartingWhiteSpace(e){
var preventWhiteSpaceInput= e.target.value;
if(/^\s/.test(preventWhiteSpaceInput))
e.target.value = '';
}Stack Overflow用户
发布于 2018-06-08 09:13:17
帕特里克先我一步，但是没有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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50751867
复制相关文章
相似问题