js屏蔽用户输入非数字按键

原文地址：http://www.byex.cn/Article/read/id/68.html

在某些特别的场景，有时候我们需要对用户的按键输入做一个校验，。比如说在商城购物时候，用户填写商品件数时，这时候我们就会要对用户输入的值做一些限制，避免用户输入非数字的按键。在javascript高级程序三中刚好有这样一个例子，因此记述下来。

首先编写全兼容获取按键ASCII码的方法

由于在Firefox与Opera中,按分号键时keyCode值为59,而IE与Safari返回186.因此通过charCode属性来编写全兼容获取按键的ASCII编码方法。注：charCode属性只有在发生keypress事件时才包含正确值.

1. var getCharCode = function (event) {
2.     if(typeof event.charCode == 'number') {
3.         return event.charCode;
4.     } else {
5.         return event.keyCode;
6.     }
7. }

此时已经可以屏蔽掉非数值按键输入了，但有些浏览器keypress事件也会对其他键触发事件。firefox与safari（3.1版本以前)会对向上、下、退格和删除键触发keypress事件。这意味着,仅考虑到屏蔽不是数值的还不够，还要避免屏蔽这些极为常用和必要的键。所幸的是，要检测这些键仍然有方法。在firefox中,所有由非字符键触发的keypress事件对应的字符编码为0,而在safrari3以前的版本中，对应的字符编码全部为8。为了让代码更通用，只要不屏蔽那些字符小于10的键即可。

1. document.getElementsByTagName('input')[0].onkeypress = function(event) {
2.     var e = event || window.event;
3.     var charCode = getCharCode(e);
4.     if(!/\d/.test(String.fromCharCode(charCode)) && charCode > 9) {
5.         e.preventDefault ? e.preventDefault() : (e.returnValue = false);
6.     } else {
7.         alert(charCode);
8.     }   
9. }

除此之外,还有一个问题需要处理：复制、粘贴及其他操作还要用到Ctrl键。除ie外的浏览器中，前面的代码也会屏蔽Ctrl+C、Ctrl+V，以及其他使用Ctrl的组合键。因此最后还要添加一个检测条件，以触保用户没有按下Ctrl键。

最终代码：

1. document.getElementsByTagName('input')[0].onkeypress = function(event) {
2.     var e = event || window.event;
3.     var charCode = getCharCode(e);
4.     if(!/\d/.test(String.fromCharCode(charCode)) && charCode > 9 && !e.ctrlKey) {
5.         e.preventDefault ? e.preventDefault() : (e.returnValue = false);
6.     } else {
7.         alert(charCode);
8.     }   
9. }

ps: 此代码并不建议实际使用，这和jquery的numberbox都有着同样的问题，就是当输入中文的时候突然按shift键切换按钮英文的时候，就会出现bug了。