oninput可以代替onchange和onpaste吗？

Question

我正在使用正则表达式来检查非白名单字符。我想在HTML中使用oninput事件来触发正则表达式检查。这种方法会产生与我尝试以某种方式一起使用onchange或onpaste相同的结果吗？

谢谢！

Javascript：

function checkInput(txtfieldId) var validChars = /^[0-9a-z\s-.#\,()]+$/i; {
if(txtfieldId.value.match(validChars)) { return true; } else { alert("Invalid special character entered"); return false; } }

Answer 1

您可以使用keypress事件并检查输入是否有效，并使用event.preventDefault()阻止默认操作。

<input type="text" id="input" ondrop="return false" ondragover="return false"/>
<script>
var validChars = /^[0-9a-z\s-.#\,()]+$/i;
document.getElementById("input").addEventListener("paste", function(e){
var clipboardData, pastedData;
// Get pasted data via clipboard API
clipboardData = e.clipboardData || window.clipboardData;
pastedData = clipboardData.getData('Text');
var inputOk = checkInput(pastedData);
if(!inputOk){
  e.preventDefault();
}
});
document.getElementById("input").addEventListener("keypress", function(e){
  var inputOk = checkInput(e.key);
  if(!inputOk){
    e.preventDefault();
  }
});
function checkInput(value)
      {

       if(value.match(validChars))
         {
          return true;
         }
       else
         {
          alert("Invalid special character entered");
          return false;
         }
      }
</script>

如果您要阻止某个类输入多个textarea，则可以使用document.querySelectorAll('.class')来获取该类的所有元素。然后，您可以使用for循环或for Each将事件侦听器添加到所有元素。

<textarea class='txt'></textarea><p/>
<textarea class='txt'></textarea><p/>
<textarea class='txt'></textarea><p/>
<textarea class='txt'></textarea><p/>
<textarea class='txt'></textarea><p/>
<textarea class='txt'></textarea><p/>
<script>
var validChars = /^[0-9a-z\s-.#\,()]+$/i;
document.querySelectorAll('.txt').forEach(function(i){
   i.addEventListener("paste", function(e){
var clipboardData, pastedData;
// Get pasted data via clipboard API
clipboardData = e.clipboardData || window.clipboardData;
pastedData = clipboardData.getData('Text');
var inputOk = checkInput(pastedData);
if(!inputOk){
  e.preventDefault();
}
});
 i.addEventListener("keypress", function(e){
  var inputOk = checkInput(e.key);
  if(!inputOk){
    e.preventDefault();
  }
});
});
function checkInput(value)
      {

       if(value.match(validChars))
         {
          return true;
         }
       else
         {
          alert("Invalid special character entered");
          return false;
         }
      }
</script>