javascript（jquery）数字输入：'3'和'＃'的keyCode是相同的 [英] javascript (jquery) numeric input: keyCode for '3' and '#' are the same
问题描述
我需要设置一个< input type =text/> ，这样它才会接受数字字符，退格键，删除键，输入键，标签页和箭头。
I need to set up an <input type="text" /> so that it will accept only numeric chars, backspace, delete, enter, tabs and arrows.
那里有很多例子，我从类似的东西开始：
There's a lot of exemple around there, i started with something similar to this:
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相同。
All that worked perfectly until I hit the "#" key. In my french canadian keyboard, the "#" has his own key (no shift implied) that returns keyCode 51, the same as the number "3".
我认为在美国键盘中，＃是通过按Shift + 3获得的，这可能是他们拥有相同键码的原因。
I think that in US keyboard, the "#" is obtained by pressing shift+3, that may be why they have the same keycode.
现在我意识到我必须处理shift和alt键也是，但这是另一个故事。
Now I realize that I have to handle the shift and alt keys too, but that's another story.
它与jquery keypress事件的工作方式不同，它提供了charCode属性，但我最初没有使用它因为文档说的是：
It works differently with the jquery keypress event, which offer the charCode property, but I did not used it at first because of what the documentation says :
由于任何官方规范都没有涵盖按键事件，因此使用它时遇到的
实际行为可能因浏览器，浏览器版本和平台而异。
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.
另外，在这种情况下我需要一种解决方法来处理标签，箭头和其他特殊键，因为它们不提供charCo de。
Also, I would need a workaround in that case to handle tabs, arrows and other special keys since they don't provide a charCode.
所以问题是：
有没有办法只允许使用keydown事件的某些特定字符？而且，这种方式可以独立于键盘布局工作吗？
作为一个副作用：哪些浏览器可能会出现按键事件的问题？我的意思是，目前我并不关心我的网站是否不支持IE6。我的目标是最近的浏览器。
As a side quest : Which browsers may be problematics with the keypress event? I mean, currently I don't really care if my website does not support IE6. I am targetting recent browsers.
作为某人在评论中指出，这种方法不允许用户在输入中ctrl + v一个数字。在我的特殊情况下，这不是一个能够粘贴数字的要求。但是这突然出现在我的脑海中，用户仍然能够正确地复制输入中的一些文本，在这种情况下可能是任何东西。我越想到它，我就越需要 keydown 事件来处理标签和箭头，并且另一个事件到处理输入本身。
As someone pointed out in the comments, this method does not allow user to "ctrl+v" a number in the input. In my particular case this is really not a requirement to be able to paste a number. But this popped something in my head, the user still can right-clic > copy some text in the input, and in that case that could be anything. The more I think of it, the more it seems to me that I will need the keydown event to handle tabs and arrows, and another event to handle the input itself.
很多这里的答案很漂亮，但是 mrtsherman 奖励使用输入和 propertychange 活动。我将使用此答案的组合进行数字验证，并像以前一样使用 keyCode 事件，以便特殊使用箭头，制表符和输入键。
A lot of beautiful answers here, but the award goes to mrtsherman for the use of input and propertychange events. I will use a combination of this answer for the numeric validation, plus the keyCode event as before for the special use of arrows, tabs and enter keys.
推荐答案
这样的事情怎么样。这应该包括剪切/粘贴以及人民币内容。我们监控文本框中的内容是否有任何变化。然后我们使用正则表达式根据白名单过滤掉字符。这不会处理非字符键，但我认为没关系。
How about something like this. This should cover cut/paste and also rmb content. We monitor the textbox for any change in content. Then we use a regex to filter out characters based on a whitelist. This won't handle non-character key, but I think that is okay.
\d 标志说只接受数字。
$('#myTextBox').bind('input propertychange', function() {
var text = $(this).val();
if (isNaN(text)) {
$(this).val(text.replace(/[^\d]/gi, ''));
}
});
我们在这里绑定两个事件。为其他浏览器输入 FireFox和propertychange。
We bind to two events here. input for FireFox and propertychange for other browsers.
这篇关于javascript（jquery）数字输入：'3'和'＃'的keyCode是相同的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
