一尘不染

JavaScript HTML文本输入仅允许数字输入

javascript

有没有一种快速的方法来将HTML文本输入(<input type=text />)设置为仅允许数字键击(加’。’)?


阅读 484

收藏
2020-04-23

共1个答案

一尘不染

注意: 这是更新的答案。下面的注释指的是一个旧版本,其中充斥着密钥代码。

JavaScript

您可以<input>使用以下setInputFilter功能过滤文本的输入值(支持Copy + Paste,Drag +
Drop,键盘快捷键,上下文菜单操作,不可键入的键,插入标记的位置,不同的键盘布局以及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
});

另请注意,您仍然必须执行服务器端验证!

jQuery

还有一个jQuery版本。

HTML 5

HTML 5提供了一个本机解决方案<input type="number">(请参见规范),但是请注意,浏览器支持有所不同:

  • 大多数浏览器仅在提交表单时验证输入,而在键入时不验证输入。
  • 大多数移动浏览器不支持stepminmax属性。
  • Chrome(版本71.0.3578.98)仍然允许用户输入字符eE输入字段。
  • Firefox(版本64.0)和Edge(EdgeHTML版本17.17134)仍然允许用户在字段中输入任何文本。
2020-04-23