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

很多时候需要用到限制文本框的数字输入，试过许多方法，都不太理想，遂决定自己实现一个来玩玩。
曾经使用过的方法
通过onkeydown事件来控制只允许数字：

1. <input onkeydown="return event.keyCode>=48&&event.keyCode<=57||event.keyCode>=96&&event.keyCode<=105" />

onkeydown事件控制起来相对比较麻烦，上面的简化版很多键都没有涉及到，操作体验比较糟糕。
jQuery的两个插件使用起来还是比较灵活的，能够满足大部分需要，但是在控制输入长度上限制的很不灵活(或许是我没有发现灵活的使用方式？)
具体实现方法
使用maskedInput里的一部分方法来提取光标位置

data-numbers控制数字输入的长度
data-decimals控制小数输入的长度
最终全部代码实现如下：

1. function validateDigitsOnly(evt) {
2. var e = evt || window.event,
3. key = e.keyCode || e.which;
4. if (
5. // Backspace, Tab, Enter, Esc, Delete
6. key == 8 || key == 9 || key == 13 || key == 27 || key == 46 ||
7. // Ctrl + A
8. (key == 65 && event.ctrlKey === true) ||
9. // Home, End, 四个方向键
10. key >= 35 && key <= 40) {
11. return;
12. }
13. if (e.shiftKey || e.altKey || e.ctrlKey) {
14. return false;
15. }
16. var el = e.target || e.srcElement,
17. // 最大数字长度
18. nl = el.getAttribute("data-numbers") || 15,
19. // 最大小数长度
20. dl = el.getAttribute("data-decimals") || 2,
21. val = el.value,
22. // "." 位置
23. dotIndex = val.indexOf("."),
24. rng = caret.call(el),
25. // 光标在"."左边
26. rLeft = rng.end <= dotIndex,
27. // 光标在"."右边
28. rRight = rng.begin > dotIndex;
29. if (
30. // 数字
31. key >= 48 && key <= 57 ||
32. // 数字键盘输入的数字
33. key >= 96 && key <= 105) {
34. if (validateValue(dotIndex, val, rLeft, rRight, nl, dl))
35. return;
36. // 选中部分文本再做一次处理
37. val = val.substring(0, rng.begin) + val.substring(rng.end);
38. dotIndex = val.indexOf(".");
39. if (validateValue(dotIndex, val, rLeft, rRight, nl, dl))
40. return;
41. }
42. else if (
43. // ".", ","
44. (key == 190 /*|| key == 188*/ ||
45. // 数字键盘上的 ".", ","
46. key == 110/*|| key == 109*/) &&
47. // 允许输入小数
48. dl > 0) {
49. if (
50. // 未输入".", 且输入的位置后面的小数位数未达到上限
51. dotIndex == -1 && (rng.end == val.length || val.substring(rng.end).length <= dl) ||
52. // 输过".", 且选中部分文本包含"."
53. dotIndex > -1 && rng.begin <= dotIndex && dotIndex < rng.end)
54. return;
55. }
56. return false;
57. }
58. // 验证输入的值
59. function validateValue(dotIndex, val, rLeft, rRight, nl, dl) {
60. if (
61. // 未输入过"."
62. dotIndex == -1 && val.length < nl ||
63. // 光标位置在"."之前
64. rLeft && val.substring(0, dotIndex).length < nl ||
65. // 光标在"."之后且未达到小数上限
66. rRight && val.substring(dotIndex + 1).length < dl)
67. return true;
68. return false;
69. }
70. // 获取光标位置
71. function caret() {
72. var begin, end;
73. begin = 0 - range.duplicate().moveStart('character', -100000);
74. end = begin + range.text.length;
75. }
76. return { begin: begin, end: end };
77. }
78. 复制代码

复制代码

使用方法
具体使用方法如下：

1. <input type="text" id="t1" />
2. <input type="text" id="t2" data-numbers="5" data-decimals="4" />
3. <script>
4. document.getElementById("t1").onkeydown = validateDigitsOnly;
5. document.getElementById("t2").onkeydown = validateDigitsOnly;
6. </script>
7. 复制代码

复制代码

或者干脆写在html里：

1. <input type="text" id="lwme_text_3" onkeydown="return validateDigitsOnly(event)" />
2. 复制代码

复制代码

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

1. <input type="text" class="digitsOnly" />
2. ?1 $(".digitsOnly").keydown(validateDigitsOnly);
3. 复制代码

复制代码

结尾
这个方法虽然有些地方效率还不够高，而且某些键盘key的还未处理，也不排除某些情况下可能失效，但是对于大多数情况下使用已经足够了。
大家若有额外需要请自行修改，当然有更好的办法也请分享(*^__^*)
over
PS:01.18更新了一些keyCode的判断,以及错把110写成109≡(▔﹏▔)≡
另外需要注意：对于使用右键菜单或者是菜单栏粘贴进来的需要额外处理；
还有一种极端的情况：在网页中选中文字并拖动到文本框内，或者是在文本框中选中文字并拖动，这都需要做额外处理
对于以上两种需要额外处理的情况，比较便捷的方法是加一个验证，比如jQuery.validate之类的表单验证，否则处理起来比较麻烦

上一篇：js实现图片放大镜预览特效
下一篇：面向对象编程的MVC模式

http://www.00h5.com/thread-2184-1-1.html