【JavaScript】约束输入框的内容
2010-05-14 17:38 Peter Jin 阅读(1299) 评论(0) 编辑 收藏 举报WEB项目中，我们常常会碰到要对入力框的内容进行约束，如下代码——控制文本框只能输入数字。
1 <html>
2 <head>
3 <title>
4 Testing !
5 </title>
6 </head>
7 <SCRIPT language="javascript">
8
9 /*
10 * 约束输入框的内容
11 * 适用于IE5.0及以上版本
12 * oObj : 输入框控件对象
13 * reg : 正则表达式
14 * isChinese ：是否允许打开输入法，
15 * true 允许打开，即允许输入中文，false 不能打开，默认为不允许打开
16 * usage:
17 *
18 * //只能输入数字和大小写字母
19 * <BODY onLoad="regInputRestriction(document.all.txt,/^[0-9a-zA-Z]*$/)">
20 * <input id="txt">
21 * </BODY>
22 */
23 function regInputRestriction(oObj,reg,isChinese)
24 {
25 function regInput(obj, reg, inputStr)
26 {
27 var docSel = document.selection.createRange();
28 if (docSel.parentElement().tagName.toLowerCase() != "input")
29 return false;
30 oSel = docSel.duplicate();
31 oSel.text = "";
32 var srcRange = obj.createTextRange();
33 oSel.setEndPoint("StartToStart", srcRange);
34 var str = oSel.text + inputStr
+ srcRange.text.substr(oSel.text.length);
35 return reg.test(str);
36 }
37 //限制输入法是否允许打开
38 if(isChinese == null)
39 isChinese = false;
40 if(isChinese)
41 oObj.style.imeMode = "auto";
42 else
43 oObj.style.imeMode = "disabled";
44
45 /* 注册事件，在ie下时注册onkeypress，ff时改为注册onkeydown事件，
46 * 要不无法获取event的keyCode */
47 if(document.all)
48 {
49 oObj.onkeypress=function()
50 {
51 //输入时激发
52 return regInput(this,reg,String.fromCharCode(event.keyCode));
53 }
54 }
55 else
56 //ff改为onkeydown事件
57 oObj.onkeydown = EventHandler;
58
59 function EventHandler(e)//此为ff的方法
60 {
61 e=e||event;
62 if(e.ctrlKey)//禁止粘贴
63 return false;
64 //不为“<-键”，“Delete键”和方向键时
65 else if(e.keyCode!=8 && e.keyCode!=46
66 && e.keyCode!=37 && e.keyCode!=38
67 && e.keyCode!=39 && e.keyCode!=40)
68 return reg.test(String.fromCharCode(e.keyCode));
69 }
70 //下面为ie的方法，在ff下不知道怎么限制
71 oObj.onpaste = function()
72 {
73 //粘贴时激发
74 return regInput(this,reg,window.clipboardData.getData('Text'));
75 }
76
77 oObj.ondrop = function(e)
78 {
79 e=e||event;
80 //拖拽时激发
81 return regInput(this,reg,event.dataTransfer.getData('Text'));
82 }
83 }
84 //-->
85 </SCRIPT>
86 <script language="javascript">
87 function initForm()
88 {
89 regInputRestriction(document.getElementById('onlyNumber'),/^[0-9]*$/);
90 }
91 </script>
92 <BODY onLoad="initForm()">
93 <INPUT id="onlyNumber"> 只能输入数字 <br> <br>
94 </BODY>
95 </html>
96
2 <head>
3 <title>
4 Testing !
5 </title>
6 </head>
7 <SCRIPT language="javascript">
8
9 /*
10 * 约束输入框的内容
11 * 适用于IE5.0及以上版本
12 * oObj : 输入框控件对象
13 * reg : 正则表达式
14 * isChinese ：是否允许打开输入法，
15 * true 允许打开，即允许输入中文，false 不能打开，默认为不允许打开
16 * usage:
17 *
18 * //只能输入数字和大小写字母
19 * <BODY onLoad="regInputRestriction(document.all.txt,/^[0-9a-zA-Z]*$/)">
20 * <input id="txt">
21 * </BODY>
22 */
23 function regInputRestriction(oObj,reg,isChinese)
24 {
25 function regInput(obj, reg, inputStr)
26 {
27 var docSel = document.selection.createRange();
28 if (docSel.parentElement().tagName.toLowerCase() != "input")
29 return false;
30 oSel = docSel.duplicate();
31 oSel.text = "";
32 var srcRange = obj.createTextRange();
33 oSel.setEndPoint("StartToStart", srcRange);
34 var str = oSel.text + inputStr
+ srcRange.text.substr(oSel.text.length);
35 return reg.test(str);
36 }
37 //限制输入法是否允许打开
38 if(isChinese == null)
39 isChinese = false;
40 if(isChinese)
41 oObj.style.imeMode = "auto";
42 else
43 oObj.style.imeMode = "disabled";
44
45 /* 注册事件，在ie下时注册onkeypress，ff时改为注册onkeydown事件，
46 * 要不无法获取event的keyCode */
47 if(document.all)
48 {
49 oObj.onkeypress=function()
50 {
51 //输入时激发
52 return regInput(this,reg,String.fromCharCode(event.keyCode));
53 }
54 }
55 else
56 //ff改为onkeydown事件
57 oObj.onkeydown = EventHandler;
58
59 function EventHandler(e)//此为ff的方法
60 {
61 e=e||event;
62 if(e.ctrlKey)//禁止粘贴
63 return false;
64 //不为“<-键”，“Delete键”和方向键时
65 else if(e.keyCode!=8 && e.keyCode!=46
66 && e.keyCode!=37 && e.keyCode!=38
67 && e.keyCode!=39 && e.keyCode!=40)
68 return reg.test(String.fromCharCode(e.keyCode));
69 }
70 //下面为ie的方法，在ff下不知道怎么限制
71 oObj.onpaste = function()
72 {
73 //粘贴时激发
74 return regInput(this,reg,window.clipboardData.getData('Text'));
75 }
76
77 oObj.ondrop = function(e)
78 {
79 e=e||event;
80 //拖拽时激发
81 return regInput(this,reg,event.dataTransfer.getData('Text'));
82 }
83 }
84 //-->
85 </SCRIPT>
86 <script language="javascript">
87 function initForm()
88 {
89 regInputRestriction(document.getElementById('onlyNumber'),/^[0-9]*$/);
90 }
91 </script>
92 <BODY onLoad="initForm()">
93 <INPUT id="onlyNumber"> 只能输入数字 <br> <br>
94 </BODY>
95 </html>
96
