防止在输入类型编号中键入非数字

Question

如果输入不是有效数字,则使用<input type=number>将导致this.value事件侦听器内部返回空字符串.您可以在http://jsfiddle.net/fSy53/上看到此示例

但是,输入中仍会显示无效字符.

有没有办法从事件监听器中获取实际显示的值,包括无效字符？

我的最终目标是阻止用户在字段中实际输入任何非数字字符.我需要使用,type=number以便移动设备使用数字虚拟键盘.我的目标是做类似this.value = this.value.replace(/[^0-9.]/g, "")on的事情keyup keypress,但这不起作用,因为如果键入了无效字符,则从this.value返回读取"".

Answer 1

如果您不喜欢传入的键值,请尝试阻止默认行为:

document.querySelector("input").addEventListener("keypress", function (evt) {
    if (evt.which < 48 || evt.which > 57)
    {
        evt.preventDefault();
    }
});

Answer 2

您可以通过阻止非数字值发生keyPress事件来实现此目的

例如(使用jQuery)

$('.input-selector').on('keypress', function(e){
  return e.metaKey || // cmd/ctrl
    e.which <= 0 || // arrow keys
    e.which == 8 || // delete key
    /[0-9]/.test(String.fromCharCode(e.which)); // numbers
})

这解释了所有不同类型的输入(例如,数字键盘的输入具有与键盘不同的代码)以及退格键,箭头键,控制/ cmd + r以重新加载等

Answer 3

请注意,不推荐使用e.which,e.keyCode和e.charCode:https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/which

我更喜欢e.key:

document.querySelector("input").addEventListener("keypress", function (e) {
    var allowedChars = '0123456789.';
    function contains(stringValue, charValue) {
        return stringValue.indexOf(charValue) > -1;
    }
    var invalidKey = e.key.length === 1 && !contains(allowedChars, e.key)
            || e.key === '.' && contains(e.target.value, '.');
    invalidKey && e.preventDefault();});

该函数不与在Firefox(控制码干扰Backspace,Tab通过检查字符串长度,等等): e.key.length === 1.

它还可以防止在开头和数字之间出现重复的点: e.key === '.' && contains(e.target.value, '.')

不幸的是,它最终没有阻止多个点: 234....

似乎没有办法应对它.

Answer 4

其他答案似乎比必要的更复杂，因此我将他们的答案调整为这个简短而甜蜜的功能。

function allowOnlyNumbers(event) {
  if (event.key.length === 1 && /\D/.test(event.key)) {
    event.preventDefault();
  }
}

它不会改变任何箭头、回车、移位、ctrl 或 tab 键的行为，因为这些事件的键属性的长度比单个字符长。它还使用简单的正则表达式来查找任何非数字字符。