如何使用 JavaScript 將 HTML 文字輸入限制為僅接受數字值？

如何將HTML 文字輸入限制為僅允許數字輸入

要在HTML 文字輸入欄位中實現僅數位輸入，您可以利用JavaScript setInputFilter 函數。此功能透過支援以下功能全面過濾輸入值：

• 複製和貼上操作
• 拖放操作
• 鍵盤快速鍵
• 上下文選單操作
• 不可輸入的鍵
• 插入符位置
• 不同的鍵盤佈局
• 有效性錯誤訊息
• 與所有瀏覽器的相容性回到IE 9

JavaScript程式碼：

// Restricts input for the given textbox to the given inputFilter function.
function setInputFilter(textbox, inputFilter, errMsg) {
  ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop", "focusout"].forEach(function(event) {
    textbox.addEventListener(event, function(e) {
      if (inputFilter(this.value)) {
        // Accepted value.
        if (["keydown", "mousedown", "focusout"].indexOf(e.type) >= 0) {
          this.classList.remove("input-error");
          this.setCustomValidity("");
        }
        this.oldValue = this.value;
        this.oldSelectionStart = this.selectionStart;
        this.oldSelectionEnd = this.selectionEnd;
      } else if (this.hasOwnProperty("oldValue")) {
        // Rejected value: restore the previous one.
        this.classList.add("input-error");
        this.setCustomValidity(errMsg);
        this.reportValidity();
        this.value = this.oldValue;
        this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
      } else {
        // Rejected value: nothing to restore.
        this.value = "";
      }
    });
  });
}

使用函數：

setInputFilter(document.getElementById("myTextBox"), function(value) {
  return /^\d*\.?\d*$/.test(value); // Allow digits and '.' only, using a RegExp.
}, "Only digits and '.' are allowed");

使用函數：

在此範例中，setInputFilter 函數用於「myTextBox」元素以允許僅數值。 inputFilter 函數使用正規表示式來確保輸入僅包含數字或小數點。

• 重要說明：
• 伺服器-端驗證： 請注意，客戶端驗證還不夠。您還必須執行伺服器端驗證以確保安全輸入處理。
• 撤銷堆疊： 此解決方案透過直接設定值來破壞撤銷功能。因此，Ctrl Z 對於無效輸入不起作用。

樣式自訂：您可以根據需要將樣式套用到「輸入錯誤」類別。

以上是如何使用 JavaScript 將 HTML 文字輸入限制為僅接受數字值？的詳細內容。更多資訊請關注PHP中文網其他相關文章！