Question

我有一个脚本，它的工作原理令人惊讶，我希望它如何工作，它基本上可以防止用户在

中所有输入的开头添加空格。

第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(e){
  var preventWhiteSpaceInput= e.target.value;
  if(/^\s/.test(preventWhiteSpaceInput))
    e.target.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'>
<br>
<input type='email' placeholder='Email'>
<br>
<input type='tel'>
</div><!--</section-1>-->

<div id='section-2'>
<input type='text'>
<br>
<input type='text'>
<br>
<input type='text'>
</div><!--</section-2>-->

<div id='section-3'>
<input type='text'>
<br>
<input type='text'>
<br>
<input type='text'>
</div><!--</section-3>-->

Answer 1

当您将类型为input的{{1}}元素用作email时，将从列表中的每个地址中删除任何尾随和前导空格。如果您对该<input type='email' />字段使用多封电子邮件，则该字段应使用逗号分隔的值。这意味着前导和尾随空格对于input类型无效。因此，无论有多少前导空格，email始终为e.target.value。因此，条件''产生/^\s/.test(preventWhiteSpaceInput)值。

要变通，您可以将false类型的text的类型设置为input，并在提交表单或使用正则表达式进一步检查有效的电子邮件值时进行设置接收电子邮件。

要进一步阅读类型为email的{{1}}，请通过link

空格删除脚本不适用于电子邮件输入

1 个答案: