如何限制 HTML 文本输入仅接受数字值？

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中文网其他相关文章！