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

Question

有没有一种快速的方法来设置 HTML 文本输入（<input type=text />）只允许数字击键（加“.”）？

Answer 1

^{注： 这是一个更新的答复。下面的评论中提到一个旧的版本，摆弄键码.}

JavaScript

的 setInputFilter 功能下允许使用 任何 种输入过滤器上的文字 <input>, ，包括各种数字过滤器(见下文)。

与大多数其他的解决方案，这个 正确支持 复制贴，拖+下降，所有快捷键，所有上下文的菜单的操作，所有非该键键(例如光标和导航键)，插入的位置，所有键盘布局的所有语言的和平台， 所有的浏览器由于即9.

自己试试 在JSFiddle.

// Restricts input for the given textbox to the given inputFilter.
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);
      }
    });
  });
}

// Restrict input to digits and '.' by using a regular expression filter.
setInputFilter(document.getElementById("myTextBox"), function(value) {
  return /^\d*\.?\d*$/.test(value);
});

一些输入的过滤器，你可能想要使用：

• 整数 值(积极的唯):
  /^\d*$/.test(value)
• 整数 值(积极的和特定的限制):
  /^\d*$/.test(value) && (value === "" || parseInt(value) <= 500)
• 整数 值(正面和负面的):
  /^-?\d*$/.test(value)
• 浮点 值(允许 . 和 , as decimal separator):
  /^-?\d*[.,]?\d*$/.test(value)
• 货币 值(即最多两个小数位数):
  /^-?\d*[.,]?\d{0,2}$/.test(value)
• A-Z 只有(即基本的拉丁字母):
  /^[a-z]*$/i.test(value)
• 拉丁字母 只有(即英语和大多数欧洲语言，看到 https://unicode-table.com 对于细节约Unicode character范围):
  /^[a-z\u00c0-\u024f]*$/i.test(value)
• 十六 值：
  /^[0-9a-f]*$/i.test(value)

注意，你仍然 必须 做服务器验证!

jQuery

还有一个jQuery版本。看看 这个答案 或者自己尝试一下 在JSFiddle.

HTML5

HTML5有机溶液 <input type="number"> (见的 说明书)，但是注意浏览器支持的变化：

• 大多数浏览器将只验证输入时提交形式，而不是打字的时候.
• 大多数移动的浏览器 不支持 step, min 和 max 属性。
• 铬(版本71.0.3578.98)仍然允许的用户输入的人物 e 和 E 进入该领域。也见 这个问题.
• 火狐(版本64.0)和边缘(EdgeHTML版17.17134)仍然允许的用户输入 任何 案文进入该领域。

自己试试 上w3schools.com.

Answer 2

使用此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();
  }
}

Answer 3

我已经搜索漫长而艰难的一个很好的答案，我们迫切需要<input type="number"，但短期的是，这2个是最简洁的方法，我能想出：

<input type="text" 
       onkeyup="this.value=this.value.replace(/[^\d]/,'')">

如果你不喜欢表示被擦除之前的分裂第二非接受的字符，所述方法下面是我的解决方案。请注意，许多附加条件，这是为了避免禁用各种导航和热键。如果有人知道如何紧凑化这一点，让我们知道！

<input type="text" 
onkeydown="return ( event.ctrlKey || event.altKey 
                    || (47<event.keyCode && event.keyCode<58 && event.shiftKey==false) 
                    || (95<event.keyCode && event.keyCode<106)
                    || (event.keyCode==8) || (event.keyCode==9) 
                    || (event.keyCode>34 && event.keyCode<40) 
                    || (event.keyCode==46) )">

Answer 4

下面是一个简单的，其允许正好一个小数，但没有更多：

<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" />