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

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

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

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

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

1. 
   
2. 
   
3. 
   
4. function validateDigitsOnly(evt) { 
   
5. 
   
6. var e = evt || window.event, 
   
7. 
   
8. key = e.keyCode || e.which; 
   
9. 
   
10. if ( 
    
11. 
    
12. // Backspace, Tab, Enter, Esc, Delete 
    
13. 
    
14. key == 8 || key == 9 || key == 13 || key == 27 || key == 46 || 
    
15. 
    
16. // Ctrl + A 
    
17. 
    
18. (key == 65 && event.ctrlKey === true) || 
    
19. 
    
20. // Home, End, 四个方向键 
    
21. 
    
22. key >= 35 && key <= 40) { 
    
23. 
    
24. return; 
    
25. 
    
26. } 
    
27. 
    
28. if (e.shiftKey || e.altKey || e.ctrlKey) { 
    
29. 
    
30. return false; 
    
31. 
    
32. } 
    
33. 
    
34. var el = e.target || e.srcElement, 
    
35. 
    
36. // 最大数字长度 
    
37. 
    
38. nl = el.getAttribute("data-numbers") || 15, 
    
39. 
    
40. // 最大小数长度 
    
41. 
    
42. dl = el.getAttribute("data-decimals") || 2, 
    
43. 
    
44. val = el.value, 
    
45. 
    
46. // "." 位置 
    
47. 
    
48. dotIndex = val.indexOf("."), 
    
49. 
    
50. rng = caret.call(el), 
    
51. 
    
52. // 光标在"."左边 
    
53. 
    
54. rLeft = rng.end <= dotIndex, 
    
55. 
    
56. // 光标在"."右边 
    
57. 
    
58. rRight = rng.begin > dotIndex; 
    
59. 
    
60. if ( 
    
61. 
    
62. // 数字 
    
63. 
    
64. key >= 48 && key <= 57 || 
    
65. 
    
66. // 数字键盘输入的数字 
    
67. 
    
68. key >= 96 && key <= 105) { 
    
69. 
    
70. if (validateValue(dotIndex, val, rLeft, rRight, nl, dl)) 
    
71. 
    
72. return; 
    
73. 
    
74. // 选中部分文本再做一次处理 
    
75. 
    
76. val = val.substring(0, rng.begin) + val.substring(rng.end); 
    
77. 
    
78. dotIndex = val.indexOf("."); 
    
79. 
    
80. if (validateValue(dotIndex, val, rLeft, rRight, nl, dl)) 
    
81. 
    
82. return; 
    
83. 
    
84. } 
    
85. 
    
86. else if ( 
    
87. 
    
88. // ".", "," 
    
89. 
    
90. (key == 190 /*|| key == 188*/ || 
    
91. 
    
92. // 数字键盘上的 ".", "," 
    
93. 
    
94. key == 110/*|| key == 109*/) && 
    
95. 
    
96. // 允许输入小数 
    
97. 
    
98. dl > 0) { 
    
99. 
    
100. if ( 
     
101. 
     
102. // 未输入".", 且输入的位置后面的小数位数未达到上限 
     
103. 
     
104. dotIndex == -1 && (rng.end == val.length || val.substring(rng.end).length <= dl) || 
     
105. 
     
106. // 输过".", 且选中部分文本包含"." 
     
107. 
     
108. dotIndex > -1 && rng.begin <= dotIndex && dotIndex < rng.end) 
     
109. 
     
110. return; 
     
111. 
     
112. } 
     
113. 
     
114. return false; 
     
115. 
     
116. } 
     
117. 
     
118. // 验证输入的值 
     
119. 
     
120. function validateValue(dotIndex, val, rLeft, rRight, nl, dl) { 
     
121. 
     
122. if ( 
     
123. 
     
124. // 未输入过"." 
     
125. 
     
126. dotIndex == -1 && val.length < nl || 
     
127. 
     
128. // 光标位置在"."之前 
     
129. 
     
130. rLeft && val.substring(0, dotIndex).length < nl || 
     
131. 
     
132. // 光标在"."之后且未达到小数上限 
     
133. 
     
134. rRight && val.substring(dotIndex + 1).length < dl) 
     
135. 
     
136. return true; 
     
137. 
     
138. return false; 
     
139. 
     
140. } 
     
141. 
     
142. // 获取光标位置 
     
143. 
     
144. function caret() { 
     
145. 
     
146. var begin, end; 
     
147. 
     
148. begin = 0 - range.duplicate().moveStart('character', -100000); 
     
149. 
     
150. end = begin + range.text.length; 
     
151. 
     
152. } 
     
153. 
     
154. return { begin: begin, end: end }; 
     
155. 
     
156. }
     
157. 复制代码
     

复制代码

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

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

复制代码

或者干脆写在html里：

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

复制代码

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

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

复制代码

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

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

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