码迷,mamicode.com
首页 > 编程语言 > 详细

javascript学习_只能输入数字的文本框

时间:2015-02-27 22:54:47      阅读:148      评论:0      收藏:0      [点我收藏+]

标签:

 最近在看javascript高级程序设计这本书,通过写一些demo帮助加深理解记忆。
此输入数字的文本框在用输入法输入字符的时候还有bug
1
<!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <script type="text/javascript"> 6 var EventUtil = { 7 addHander: function (element, type, hander) { 8 if (element.addEventListener) { //DOM2 9 element.addEventListener(type, hander, false); //在冒泡阶段调用事件处理程序 10 } else if (element.attachEvent) { //IE 11 element.attachEvent("on" + type, hander); 12 } else { 13 element["on" + type] = hander; 14 } 15 }, 16 removeHander: function (element, type, hander) { 17 if (element.removeEventListener) { 18 element.removeEventListener(type, hander, false); 19 } else if (element.detachEvent) { 20 element.detachEvent("on" + type, hander); 21 } else { 22 element["on" + type] = null; 23 } 24 }, 25 getEvent: function (event) { 26 return event ? event : window.event; 27 }, 28 getTarget: function (event) { 29 return event.target || event.srcElement; 30 }, 31 preventDefault: function (event) { 32 if (event.preventDefault) { 33 event.preventDefault(); 34 } else { 35 event.returnValue = false; 36 } 37 }, 38 stopPropagation: function (event) { 39 if (event.stopPropagation) { 40 event.stopPropagation(); 41 } else { 42 event.cancelBubble = true; 43 } 44 }, 45 getCharCode: function (event) { 46 if (typeof event.charCode == "number") { 47 return event.charCode; //ASCII编码 48 } else { 49 return event.keyCode; //IE8及以前 Opera 50 } 51 }, 52 getClipboardText: function (event) { 53 var clipboardData = (event.clipboardData || window.clipboardData); 54 return clipboardData.getData("text"); 55 }, 56 setClipboardText: function (event, value) { 57 if (event.clipboardData) { 58 return event.clipboardData.setData("text/plian", value); 59 } else if (window.clipboardData) { //IE 60 return window.clipboardData.setData("text", value); 61 } 62 } 63 }; 64 65 66 </script> 67 </head> 68 <body> 69 <input type="text" id="mynum" /> 70 <script type="text/javascript"> 71 var mynum = document.getElementById("mynum"); 72 //键盘输入 73 EventUtil.addHander(mynum, "keypress", function (event) { 74 event = EventUtil.getEvent(event); 75 var charCode = EventUtil.getCharCode(event); 76 if (!/\d/.test(String.fromCharCode(charCode)) 77 && charCode > 8 //不屏蔽向上键,向下键,退格键,删除键;这些键都会触发keypress事件;这些键对应的字符编码小于9 78 && !event.ctrlKey //不屏蔽ctrl键,能复制,粘贴 79 ) 80 { 81 EventUtil.preventDefault(event); 82 } 83 }); 84 //剪贴板操作 85 EventUtil.addHander(mynum, "paste", function (event) { 86 event = EventUtil.getEvent(event); 87 var text = EventUtil.getClipboardText(event); 88 if (!/^\d*$/.test(text)) { 89 EventUtil.preventDefault(event); 90 } 91 }); 92 </script> 93 </body> 94 </html>

 

javascript学习_只能输入数字的文本框

标签:

原文地址:http://www.cnblogs.com/biganqiang/p/4304442.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!