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

2021-10-01 05:09:38

很多时候需要用到限制文本框的数字输入，试过许多方法，都不太理想，遂决定自己实现一个来玩玩。
曾经使用过的方法
通过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
上一篇：Item 26: 避免对universal引用进行重载


下一篇：javascript当文本框获得焦点设置边框