Question

我创建了一个函数来阻止用户在字段中输入除数字以外的任何内容（但允许使用“退格”，“输入”等有用的键...）

这里有一个例子的jsFiddle：http://jsfiddle.net/cWHRp/1/

和javascript代码：

$('input').on('keypress', function (e) {
    if (
        // Allow "backspace", "tab", "enter", "escape" and "delete"
        ($.inArray(e.keyCode, [8, 9, 13, 27, 46]) !== -1) ||
        // Allow "shift + decimal point" (= delete on numpad)
        (e.shiftKey === true && e.keyCode ==  110) ||
        // Allow "Ctrl + A" and "Ctrl + C"
        (e.ctrlKey === true && ($.inArray(e.keyCode, [65, 67]) !== -1)) ||
        // Allow "end", "home", "left arrow", "up arrow", "right arrow" and "down arrow"
        (e.keyCode >= 35 && e.keyCode <= 39) ||
        // Allow "shift + classic numbers"
        (e.shiftKey === true && e.keyCode >= 48 && e.keyCode <= 57) ||
        // Allow numbers on numpad
        (e.keyCode >= 96 && e.keyCode <= 105)
    ) {
        return;
    }
    e.preventDefault();
});

即使使用shift + number也能正常工作。但是当用户在键盘上打字时，我不知道如何检测到capsLock是ON。

请您解决这个问题吗？

提前谢谢！

Answer 1

不要这样做，这会产生比解决更多的问题。以下是一些更好的解决方案：

a）<input type="number" />

b）<input type="text" pattern="\d+" />

c）.replace(/[^\d]/g,'')（或change）事件监听器中的keyup

d）蒙面输入插件

e）客户端+服务器端验证（无论如何都应该使用）

Answer 2

好的，首先就像别人提到的那样：你为什么要这样做？。 @pawel提出了一些更好的方法。

也就是说，使用KeyboardEvent.getModifierState()方法，您可以执行以下操作：

$('input').on('keypress', function(e) {
  var isCapsLock = e.originalEvent.getModifierState("CapsLock");
  ...
});

Answer 3

您可以使用oninput事件（处理来自contextmenu的粘贴值）并使用正则表达式匹配所有非数字字符：

SEE DEMO

$('input').on('input', function (e) {
    this.value = this.value.replace(/\D/g,''); 
});

对于不支持oninput事件的旧浏览器，您仍然可以使用onkeyup / onpaste事件。

输入中只有数字：在按键时检测“capsLock”

3 个答案: