首頁 > web前端 > js教程 > 如何限制 HTML 文字輸入僅接受數字值?

如何限制 HTML 文字輸入僅接受數字值?

DDD
發布: 2024-12-15 13:52:26
原創
373 人瀏覽過

How to Restrict HTML Text Input to Only Accept Numeric Values?

HTML 文字輸入僅允許數位輸入

簡介

HTML 允許用戶鍵入文本,但如果您只想將輸入限制為數字怎麼辦?這對於收集帳號或 PIN 等資料很有用。

JavaScript 解決方案

實現此目的的一種方法是透過 JavaScript。這是一個過濾掉非數字字元的JavaScript 函數:

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檢查輸入是否為數字:

setInputFilter(document.getElementById("numericInput"), function (value) {
  return /^\d*\.?\d*$/.test(value); // Allow digits and '.' only
}, "Only numbers and '.' allowed");
登入後複製

這將限制numericInput文字輸入欄位僅接受數字字元(和小數點)。

注意

當輸入無效值時,請記得套用輸入錯誤 CSS 類別來設定輸入欄位的樣式。

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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板