^{注意：这是一个更新的答案。下面的评论指的是一个弄乱了键码的旧版本。}

JavaScript

在JSFiddle上亲自尝试一下。

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

// 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

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

将首选样式应用于输入错误类。这里有一个建议：

.input-error{
  outline: 1px solid red;
}

有关更多输入滤波器示例，请参阅 JSFiddle 演示。另请注意，您仍然必须进行服务器端验证！

TypeScript

这是一个 TypeScript 版本。

function setInputFilter(textbox: Element, inputFilter: (value: string) => boolean, errMsg: string): void {
    ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop", "focusout"].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">

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

在 w3schools.com 上亲自尝试一下。

使用此 DOM

<input type='text' onkeypress='validate(event)' />

这个脚本

function validate(evt) {
  var theEvent = evt || window.event;

  // Handle paste
  if (theEvent.type === 'paste') {
      key = event.clipboardData.getData('text/plain');
  } else {
  // Handle key press
      var key = theEvent.keyCode || theEvent.which;
      key = String.fromCharCode(key);
  }
  var regex = /[0-9]|\./;
  if( !regex.test(key) ) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
  }
}