Question

此正则表达式是文本字段中允许的字符的白名单。但是，当使用自动完成功能填充字段时，它不会捕获无效字符。

使用结尾处的填充程序，以便IE和Edge可以捕获小键盘无效字符。

当自动完成填充时，如何获取此正则表达式来捕获无效字符？

var validChars = /^[ 0-9a-z\s.#,-]*$/i;
var textareas = document.querySelectorAll('.txt');
for(let i = 0; i < textareas.length; i++){
 textareas[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 = scrub(pastedData);
if(!inputOk){
  e.preventDefault();
}
});
textareas[i].addEventListener("keypress", function(e){
  var inputOk = scrub(e.key);
  if(!inputOk){
    e.preventDefault();
  }
});
}
function scrub(contents)
      {

       if(contents.match(validChars))
         {
          return true;
         }
       else
         {
          alert("Invalid special character entered: " + contents + " ");
          return false;
         }
      }
// KeyboardEvent shim needed for Internet Explorer and Edge. These browsers return non-standard 'key' 
// property values from the numberpad. 
(function() {

  var event = KeyboardEvent.prototype
  var desc = Object.getOwnPropertyDescriptor(event, "key")
  if (!desc) return

  var keys = {

    Multiply: "*",
    Add: "+",
    Divide: "/",
  }

  Object.defineProperty(event, "key", {
    get: function() {
      var key = desc.get.call(this)

      return keys.hasOwnProperty(key) ? keys[key] : key
    },
  })
})()

Answer 1

您可以使用向文本区域添加input事件监听器，并且仅在与正则表达式匹配时才允许输入。

<textarea></textarea>
<script>
var validChars = /^[ 0-9a-z\s.#,-]*$/i;
var prevInput = null;
document.querySelector('textarea').addEventListener("input", function(e){
  if(!this.value.match(validChars)){
    alert("Invalid Input!");
    this.value = prevInput? prevInput: '';
  }
  prevInput = this.value;
});
</script>

如何在自动完成功能上使用正则表达式

1 个答案: