Question

没有jQuery请纯粹的JS

我有这个脚本执行一个if语句，该语句阻止在输入的开头插入空格，它在第一部分的第一个输入上工作，但是无法处理该容器调用部分-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>-->

Answer 1

在Caused by: android.content.res.Resources$NotFoundException: Resource "com.jjoey.transporterdriver:drawable/app_btn_bkg" (7f08005b) is not a Drawable (color or path): TypedValue{t=0x1/d=0x7f08005b a=-1 r=0x7f08005b} at android.content.res.Resources.loadDrawableForCookie(Resources.java:2661) at android.content.res.Resources.loadDrawable(Resources.java:2576) at android.content.res.TypedArray.getDrawable(TypedArray.java:749) at android.view.View.<init>(View.java:3813) at android.widget.TextView.<init>(TextView.java:650) at android.widget.Button.<init>(Button.java:111) at android.widget.Button.<init>(Button.java:107)中，您正在重新选择元素。您应该添加noStartingWhiteSpace作为第一个参数，并使用e。

例如：

e.target

Answer 2

帕特里克打败了我，但你也可以这样做而不用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>

事件侦听器无法处理其他输入

2 个答案: