javascript (jquery) 数字输入 : keyCode for '3' and '#' are the same

Question

我需要设置一个 <input type="text" />这样它将只接受数字字符、退格键、删除、输入、制表符和箭头。

周围有很多例子，我从类似的开始:

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 键，但那是另一回事了。

它与提供 charCode 属性的 jquery 按键事件不同，但我一开始没有使用它，因为 documentation说:

as the keypress event isn't covered by any official specification, the actual behavior encountered when using it may differ across browsers, browser versions, and platforms.

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

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

作为支线任务:哪些浏览器可能会出现按键事件问题？我的意思是，目前我真的不在乎我的网站是否不支持 IE6。我的目标是最近的浏览器。

编辑

---

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

编辑2

---

这里有很多漂亮的答案，但奖励是 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, ''));
    }
});

我们在这里绑定(bind)了两个事件。 input用于 FireFox 和 propertychange 用于其他浏览器。