當以不允許的字符開頭時，使用正則表達式僅允許 HTML 輸入字段中的某些字符似乎不起作用

Question

我試圖只允許用戶使用以下正則表達式鍵入/復制到 HTML- <input>字段中的某些字符：

return /^[A-Za-z0-9 ]*$/.test(value); 

它適用於我，但前提是我以允許的字符開頭（例如：“ A ”）。

但是，如果我從我的正則表達式不允許的字符開始（例如：“ ！ ”），我突然可以輸入應該禁用的字符：

為了進行測試，我創建了以下小提琴： >>Click<<

完整腳本作為參考：

<input type="text" class="polarion-TextBox" name="targetDocument" style="width: 100%;">

<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function() {

    window.setTimeout ( function() {  
    // Restricts input for the given textbox to the given inputFilter.
    function setInputFilter(textbox, inputFilter) {
      ["input"].forEach(function(event) {
        textbox.addEventListener(event, function() {
          if (inputFilter(this.value)) {
            this.oldValue = this.value;
            this.oldSelectionStart = this.selectionStart;
            this.oldSelectionEnd = this.selectionEnd;
          } else if (this.hasOwnProperty("oldValue")) {
            this.value = this.oldValue;
            this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
          }
        });
      });
    }

   // Restrict input to digits and '.' by using a regular expression filter.
  setInputFilter(document.getElementsByName("targetDocument")[0], function(value) {
  return /^[A-Za-z0-9 ]*$/.test(value); 

  });

    }, 1000);


}, false);  
</script>

Answer 1

1. 當您第一次輸入任何字符時，您沒有 oldValue，因此您的代碼不會 go 進入您的第二個條件
2. 一旦您的第一個字符不匹配，無論您接下來鍵入什么，該值都不會進入第一個條件，因此 oldValue 永遠不會設置，並且由於不存在 oldValue 您的代碼不會 go 進入第二個條件。

您可以將初始 oldValue 設置為空字符串來解決此問題。

添加textbox.oldValue = ""; 在textbox.addEventListener之前。

Answer 2

這對我有用：

 function setInputFilter(textbox, inputFilter) { ["input"].forEach(function(event) { textbox.addEventListener(event, function() { if (inputFilter(this.value)) { if (this.hasOwnProperty("oldValue")) { this.value = this.oldValue; this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd); } else { this.value = ""; this.setSelectionRange(0, 0); } } else { this.oldValue = this.value; this.oldSelectionStart = this.selectionStart; this.oldSelectionEnd = this.selectionEnd; } }); }); } window.addEventListener("DOMContentLoaded", function() { setInputFilter(document.getElementsByName("targetDocument")[0], function( value ) { return /[^A-Za-z0-9 ]/g.test(value); }); });

 <input type="text" class="polarion-TextBox" name="targetDocument" style="width: 100%;">

如果在無效輸入上沒有oldValue可恢復，則主要更改是清除該value 。 如果有任何無效字符，我還反轉了邏輯並返回true 。