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

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

答案

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

的 JavaScript

在 JSFiddle 上尝试一下。

您可以使用以下setInputFilter函数来过滤文本<input>的输入值(支持 “复制 + 粘贴”,“拖动 + 拖放”,键盘快捷键,上下文菜单操作,不可键入的键,插入符号位置,不同的键盘布局以及所有浏览器)自 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 演示 。另请注意,您仍然必须执行服务器端验证!

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

我一直在努力寻找一个好的答案,我们非常需要<input type="number" ,但除此之外,这两种是我想出的最简洁的方法:

<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) )">

这是一个简单的值,它只允许一个小数,但不能再多:

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

还有一个例子,对我来说非常有用:

function validateNumber(event) {
    var key = window.event ? event.keyCode : event.which;
    if (event.keyCode === 8 || event.keyCode === 46) {
        return true;
    } else if ( key < 48 || key > 57 ) {
        return false;
    } else {
        return true;
    }
};

同时附加到按键事件

$(document).ready(function(){
    $('[id^=edit]').keypress(validateNumber);
});

和 HTML:

<input type="input" id="edit1" value="0" size="5" maxlength="5" />

这是一个 jsFiddle 示例

HTML5 具有<input type=number> ,这听起来很适合您。当前,只有 Opera 本身支持它,但是有一个项目具有 JavaScript 实现。

这里的大多数答案都具有使用键事件的弱点

许多答案会限制您使用键盘宏进行文本选择,复制 + 粘贴以及更多不良行为的能力,其他答案似乎取决于特定的 jQuery 插件,这些插件会用机枪杀死苍蝇。

无论输入机制(击键,复制 + 粘贴,右键单击复制 + 粘贴,语音转文本等),此简单的解决方案似乎都对我跨平台最有效。所有文本选择键盘宏仍然可以使用,甚至会限制通过脚本设置非数字值的能力。

function forceNumeric(){
    var $input = $(this);
    $input.val($input.val().replace(/[^\d]+/g,''));
}
$('body').on('propertychange input', 'input[type="number"]', forceNumeric);

我选择使用这里提到的两个答案的组合,即

<input type="number" />

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode
    return !(charCode > 31 && (charCode < 48 || charCode > 57));
}

<input type="text" onkeypress="return isNumberKey(event);">

HTML5 支持正则表达式,因此您可以使用以下命令:

<input id="numbersOnly" pattern="[0-9.]+" type="text">

警告:某些浏览器尚不支持此功能。

的 JavaScript

function validateNumber(evt) {
    var e = evt || window.event;
    var key = e.keyCode || e.which;

    if (!e.shiftKey && !e.altKey && !e.ctrlKey &&
    // numbers   
    key >= 48 && key <= 57 ||
    // Numeric keypad
    key >= 96 && key <= 105 ||
    // Backspace and Tab and Enter
    key == 8 || key == 9 || key == 13 ||
    // Home and End
    key == 35 || key == 36 ||
    // left and right arrows
    key == 37 || key == 39 ||
    // Del and Ins
    key == 46 || key == 45) {
        // input is VALID
    }
    else {
        // input is INVALID
        e.returnValue = false;
        if (e.preventDefault) e.preventDefault();
    }
}

另外,您可以添加逗号,句号和减号(,.-)

// comma, period and minus, . on keypad
  key == 190 || key == 188 || key == 109 || key == 110 ||

的 HTML

<input type="text" onkeydown="validateNumber(event);"/ >