javascript (jquery) 数字输入：'3' 的 keyCode和#x27;#'是一样的

Question

我需要设置一个 以便它只接受数字字符、退格键、删除、输入、制表符和箭头。

那里有很多例子，我从类似的开始：

function isNumericKeyCode (keyCode){
    return ( (keyCode >= 48 && keyCode <= 57) //standard keyboard
           ||(keyCode >= 96 && keyCode <= 105)) //Numpad
}

$('#myTextBox').keydown(function(e){
         var handled = true;
         var keyCode = e.keyCode;
         switch(keyCode){
            //Enter and arrows
            case 13:
            case 37:
            case 38:
            case 39:
            case 40:
               doSomethingSpecialsWithThesesKeys();
               break;
            default:
               handled = false;
               break;
         }

         if (  !handled
            && keyCode !== 8 //backspace
            && keyCode !== 9 //tab
            && keyCode !== 46 //del
            && !isNumericKeyCode(keyCode)){

            handled = true;
         }

         return handled;
});

所有这些都运行良好，直到我按下“#”键。在我的法语加拿大键盘中，“#”有自己的键（不隐含移位），该键返回 keyCode 51，与数字“3”相同。

我认为在美国键盘中，“#”是通过按shift+3获得的，这可能就是它们具有相同键码的原因。

现在我意识到我也必须处理 Shift 和 Alt 键，但那是另一个故事了。

它与 jquery keypress 事件的工作方式不同，它提供 charCode 属性，但我一开始没有使用它，因为 文档说：

由于任何官方规范均未涵盖按键事件，因此 使用它时遇到的实际行为可能因浏览器而异， 浏览器版本和平台。

另外，在这种情况下我需要一种解决方法来处理选项卡、箭头和其他特殊键，因为它们不提供 charCode。

所以问题是： 有没有办法使用 keydown 事件只允许某些特定字符？而且，以一种独立于键盘布局的方式工作？

作为一个附带任务：哪些浏览器可能会出现按键事件问题？我的意思是，目前我并不关心我的网站是否不支持 IE6。我的目标是最新的浏览器。

编辑

---

正如有人在评论中指出的那样，此方法不允许用户在输入中“ctrl+v”数字。在我的特定情况下，这实际上并不是能够粘贴数字的要求。但这在我的脑海中弹出了一些东西，用户仍然可以右键单击> >复制输入中的一些文本，在这种情况下，可以是任何内容。我想得越多，我就越觉得我需要 keydown 事件来处理选项卡和箭头，以及 另一个 事件来处理输入本身。

Edit2

---

这里有很多漂亮的答案，但该奖项授予 mrtsherman 因为使用 input 和 propertychange 事件。我将使用此答案的组合进行数字验证，并像以前一样使用 keyCode 事件来特殊使用箭头、制表符和输入键。

Answer 1

像这样的事情怎么样？这应该涵盖剪切/粘贴以及人民币内容。我们监视文本框内容的任何变化。然后我们使用正则表达式根据白名单过滤掉字符。这不会处理非字符键，但我认为没关系。

\d 标志表示只接受数字。

http://jsfiddle.net/UXeva/1

$('#myTextBox').bind('input propertychange', function() {
    var text = $(this).val();
    if (isNaN(text)) {
       $(this).val(text.replace(/[^\d]/gi, ''));
    }
});

我们在这里绑定到两个事件。 FireFox 的 input 以及其他浏览器的 propertychange。

Answer 2

如果旧版浏览器不是问题，数字输入类型应该涵盖这一点。

<input type="number" />

如果没有，您可以使用 isNaN javascript 函数

$("#number1").on('keyup', function() {
    var myval = $(this).val();
    if (isNaN(myval)) {
        alert('numbers only!');
    }
});

我个人会进行一些正则表达式过滤，检查值是否已更改，这将允许任何不更改值的字符，例如制表符、回车键和箭头。使用正则表达式，您还可以添加或删除任何字符，或者您可以仅使用 \d 表示数字或如下所示，[0-9]。您的具体需求到底是什么？

var P;
$("#number2").on('keyup', function() {
    var V = $(this).val();
    if (V != P) {
        $(this).val(V.replace(/[^0-9]/g,''));
    }
    P=V;
});

它们也可以组合成这样的东西：

$("#number3").on('keyup', function() {
    var V = $(this).val();
    if (isNaN(V)) {
        $(this).val(V.replace(/[^0-9]/g,''));
    }
});

这里有一个 FIDDLE 来测试它们！

Answer 3

为什么不做这样的事情呢？它使用 keyup() 事件和 isNaN() 的组合。无论用户使用键盘输入还是粘贴数字，它都可以工作。

它的工作方式是，一旦文本发生变化，它就会检查该值是否是数字。如果不是，它将修剪输入，直到它是一个数字。因此，如果您输入 25s 或 25ss，您将得到 25。

这也适用于 ctrl+v 粘贴。它不适用于右键单击粘贴，因此，我仅在文本框上禁用了右键单击。

现场演示

Jquery

$(document).ready(function(){
    $('#number').keyup(function(){    
        var input = this.value;
        while (isNaN(input))
        {
            input = input.substring(0,input.length-1);
            $('#number').val(input);             
        }
    });
    $('#number').bind("contextmenu",function(e){
        return false;
    });
});

Answer 4

jQuery 还在事件对象上提供了 shiftkey 布尔值：

$('#myTextBox').keydown(function(e){
  if(e.keyCode === 51 && !e.shiftKey){
     // '3' key pressed while shift was **not** held down (not '#')
  }
});

编辑 我重新阅读了您的问题并更改了上面的代码 !shiftkey