JS限制文本框只能输入数字

通过键盘每个键的key值进行限制,在html代码使用事件onkeydown="return validateDigitsOnly(event)"即可实现

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

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。