JavaScript

<input>您可以使用以下功能过滤文本的输入值setInputFilter（支持复制+粘贴、拖放、键盘快捷键、上下文菜单操作、不可键入的键、插入符号位置、不同的键盘布局以及自 IE 9 以来的所有浏览器）：

// Restricts input for the given textBox to the given inputFilter function.
function setInputFilter(textBox, inputFilter) {
  ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].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);
      } else {
        this.value = "";
      }
    });
  });
}

您现在可以使用该setInputFilter功能安装输入过滤器：

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

有关更多输入过滤器示例，请参阅JSFiddle 演示。另请注意，您仍然

打字稿

这是一个 TypeScript 版本。

function setInputFilter(textBox: Element, inputFilter: (value: string) => boolean): void {
    ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {
        textBox.addEventListener(event, function(this: (HTMLInputElement | HTMLTextAreaElement) & {oldValue: string; oldSelectionStart: number | null, oldSelectionEnd: number | null}) {
            if (inputFilter(this.value)) {
                this.oldValue = this.value;
                this.oldSelectionStart = this.selectionStart;
                this.oldSelectionEnd = this.selectionEnd;
            } else if (Object.prototype.hasOwnProperty.call(this, 'oldValue')) {
                this.value = this.oldValue;
                if (this.oldSelectionStart !== null &&
                    this.oldSelectionEnd !== null) {
                    this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
                }
            } else {
                this.value = "";
            }
        });
    });
}

jQuery

还有一个 jQuery 版本。看到这个答案。

HTML 5

HTML 5 有一个原生解决方案<input type="number">（参见规范），但请注意浏览器支持各不相同：

大多数浏览器只会在提交表单时验证输入，而不是在输入时。
大多数移动浏览器不支持step,min和max属性。
Chrome（版本 71.0.3578.98）仍然允许用户输入字符e并E进入字段。另请参阅此问题。
Firefox（64.0 版）和 Edge（EdgeHTML 17.17134 版）仍然允许用户在字段中输入任何文本。

在 w3schools.com 上亲自尝试。

解决方法

有没有一种快速的方法可以将 HTML 文本输入 ( <input type=text />) 设置为只允许数字键击（加 ‘.’）？