使用Javascript限制文本框只允许输入数字

很多时候需要用到限制文本框的数字输入，试过许多方法，都不太理想，遂决定自己实现一个来玩玩。

曾经使用过的方法

通过onkeydown事件来控制只允许数字：

?
通过jQuery插件Masked Input：http://digitalbush.com/projects/masked-input-plugin/
通过jQuery插件MeioMask：https://github.com/fabiomcosta/jquery-meiomask
onkeydown事件控制起来相对比较麻烦，上面的简化版很多键都没有涉及到，操作体验比较糟糕。
jQuery的两个插件使用起来还是比较灵活的，能够满足大部分需要，但是在控制输入长度上限制的很不灵活(或许是我没有发现灵活的使用方式？)

具体实现方法

使用maskedInput里的一部分方法来提取光标位置
使用stackoverflow上提供的通用方法来处理键盘的敲击：http://stackoverflow.com/questions/469357/html-text-input-allow-only-numeric-input
更新：参考http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes上列出的keycode
然后再自定义两个属性来设置输入的数字、小数长度：

data-numbers控制数字输入的长度
data-decimals控制小数输入的长度

最终全部代码实现如下：

?

使用方法

具体使用方法如下：

?
或者干脆写在html里：

?
如果引入jQuery的话使用起来就更加简单了：

?
?

一些需要额外处理的情况

对于使用右键菜单或者是菜单栏粘贴进来的需要额外处理；

有方法是直接访问clipboardData来修改剪切板数据，但是可能会受权限困扰； 所以干脆直接通过onpaste事件来禁止粘贴比如：

?
此外还有oncut,oncopy来禁止剪切、粘贴

若只是单单禁用右键菜单，可以使用onmousedown方法：

?

还有一种极端的情况：在网页中选中文字并拖动到文本框内，或者是在文本框中选中文字并拖动，这都需要做额外处理

一种办法是直接阻止body的ondragstart事件(体验不是很好)：

?
直接加在body上用户体验不是很好，所以这种办法不太可取，不过用来禁止文本框内的选中内容拖动还是比较不错的办法：

?
更好一点的办法是在oninput事件里处理(ie6-8为onpropertychange事件)，这样用户基本感觉不到文字闪动：

?
这个方法也可以用于处理粘贴的文本

在win8下，切换到微软拼音可能会造成无法输入，不知道其他系统或者其他输入法有没有这个问题(`~~`)

解决办法是通过样式style="ime-mode:disabled"来禁用输入法，chrome浏览器不支持这个样式则直接使用input type=number来控制

表单验证还是必须品

使用了以上的方法，基本上能解决大部分出现的问题，但是为了防止未知情况的影响，还是有必要加上jQuery.validate之类的表单验证来提供更多保障

结尾

这个方法虽然有些地方效率还不够高，而且某些键盘key的还未处理，也不排除某些情况下可能失效，但是对于大多数情况下使用已经足够了。
大家若有额外需要请自行修改，当然有更好的办法也请分享(*^__^*)
PS:01.18更新了一些keyCode的判断,以及错把110写成109≡(▔﹏▔)≡
PS:感谢评论的各位提供的方法
放到github以后慢慢完善
over