input框的输入事件

要求：

input框只能输入数字。

问题：

只判断e.keyCode的情况下，在中文输入法中出现了e.keyCode均为229的情况，不论输入数字还是其他。

解决：

修改input框的type为number，但会出现默认样式，并且并不能真的限制数字。（在中文输入法下还是能输入中文）

1. 中文输入法

在中文打出的字母没有真正的键入input框的时候是会触发事件的，但再点击回车d不会被输入input框。

2. 英文输入法

输入d之后并没有显示，但是出现了奇怪的现象，onkeypress事件的keyCode却显示的很奇怪，它识别成了数字键盘上的4。

input框有默认样式，遂换方法。

不过这里的input框type为number的时候，复制粘贴也是不会显示中文的，问题只在未键入时会触发。

2. 采用正则：

在代码里拦截将非数字替换为空。

text.value = text.value.replace(/[^\d]/g,'');

但后来发现这样不能输入符号，所以换成了：

text.value = text.value.replace(/[^-\d]/g,'');

那么来看看这次的反应：

中文输入法下，onkeydown的keyCode还是229。

空格之后没有被输入：

中文输入法下输入1：我点击的是右边小键盘的1，down和up事件都识别对了，但press却识别成了字母上面的1。

这次点击字母上面的1：就全都是49，识别对了。

试试特殊键：

回车不会触发oninput事件：

alt：只有down和up事件

 

空格：

tab键：按下后输入框失去焦点并且只触发了down事件。

capslock：就是切换大小写那个按键，也只有down和up事件。

shift：

 

结论：(chrome下)

1. 中文输入法下不会触发onkeypress事件。
2. 在没有真正被键入输入框的时候，keyCode与charCode都会是undefined，而which是0。
3. 中文输入法下onkeydown的keyCode及which都是229，charCode=0，但onkeyup可以得到真正的keyCode。
4. ctrl只会触发onkeydown事件。
5. alt，capslock，shift只会触发onkeydown和onkeyup事件。
6. 空格都会触发。
7. 用onkeypress监听回车是不可取的，因为它根本不会触发。
8. onkeypress谨慎使用，因为它监控的并不准确，但如果只是监控数字不用那么精确的话就可以。
9. 事件的执行顺序依次是：onkeydown --> onkeypress --> oninput --> onkeyup。

对于ff和ie表现可能会不一样，具体需要再监控。