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

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

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

Javascript

您可以

<input>

使用以下

setInputFilter

功能过滤文本的输入值（支持CopyPaste，Drag+Drop，键盘快捷键，上下文菜单 *** 作，不可键入的键，插入标记的位置，不同的键盘布局以及IE9以后的所有浏览器 ：

// 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提供了一个本机解决方案

<inputtype="number">

请参见规范，但是请注意，浏览器支持有所不同：

• 大多数浏览器仅在提交表单时验证输入，而在键入时不验证输入。
• 大多数移动浏览器不支持

  step

  ，

  min

  和

  max

  属性。
• Chrome（版本71.0.3578.98）仍然允许用户输入字符

  e

  并

  E

  输入字段。
• Firefox（版本64.0）和Edge（EdgeHTML版本17.17134）仍然允许用户在字段中输入 任何 文本。