限制HTML的文本编辑框只能输入数字4种方法
2016-09-18 13:24
274 查看
限制HTML的文本编辑框只能输入数字4种方法
1. keydown 通过阻止事件往keypress传播,来禁止非数字字符在文本框显示。 <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> function prevent(e) { e.preventDefault ? e.preventDefault() : e.returnValue = false; } function digitInput(el, e) { var e = e || window.event; // FF、Chrome IE下获取事件对象 var c = e.charCode || e.keyCode; //FF、Chrome IE下获取键盘码 //var txt = $('label').text(); //$('label').text(txt + ' ' + c); var val = el.val(); if (c == 110 || c == 190){ // 110 (190) - 小(主)键盘上的点 (val.indexOf(".") >= 0 || !val.length) && prevent(e); // 已有小数点或者文本框为空,不允许输入点 } else { if ((c != 8 && c != 46 && // 8 - Backspace, 46 - Delete (c < 37 || c > 40) && // 37 (38) (39) (40) - Left (Up) (Right) (Down) Arrow (c < 48 || c > 57) && // 48~57 - 主键盘上的0~9 (c < 96 || c > 105)) // 96~105 - 小键盘的0~9 || e.shiftKey) { // Shift键,对应的code为16 prevent(e); // 阻止事件传播到keypress } } } $(function(){ $("input[name='text1']").keydown(function(e) { digitInput($(this), e); }); }); </script> </head> <body> <input type="text" name="text1" /> <label></label> </body> </html> (1)限制input只能输入整型的整数或浮点型的小数: function prevent(e) { e.preventDefault ? e.preventDefault() : e.returnValue = false; } function digitInput(el, e) { var e = e || window.event; // FF、Chrome IE下获取事件对象 var c = e.charCode || e.keyCode; //FF、Chrome IE下获取键盘码 //var txt = $('label').text(); //$('label').text(txt + ' ' + c); var val = el.val(); if (c == 110 || c == 190){ // 110 (190) - 小(主)键盘上的点 (val.indexOf(".") >= 0 || !val.length) && prevent(e); // 已有小数点或者文本框为空,不允许输入点 } else { if ((c != 8 && c != 46 && // 8 - Backspace, 46 - Delete (c < 37 || c > 40) && // 37 (38) (39) (40) - Left (Up) (Right) (Down) Arrow (c < 48 || c > 57) && // 48~57 - 主键盘上的0~9 (c < 96 || c > 105)) // 96~105 - 小键盘的0~9 || e.shiftKey) { // Shift键,对应的code为16 prevent(e); // 阻止事件传播到keypress } } } $(function(){ $("input[name='text1']").keydown(function(e) { digitInput($(this), e); }); }); (2)限制input只能输入整型的整数: function prevent(e) { e.preventDefault ? e.preventDefault() : e.returnValue = false; } function digitInput(e) { var c = e.charCode || e.keyCode; //FF、Chrome IE下获取键盘码 if ((c != 8 && c != 46 && // 8 - Backspace, 46 - Delete (c < 37 || c > 40) && // 37 (38) (39) (40) - Left (Up) (Right) (Down) Arrow (c < 48 || c > 57) && // 48~57 - 主键盘上的0~9 (c < 96 || c > 105)) // 96~105 - 小键盘的0~9 || e.shiftKey) { // Shift键,对应的code为16 prevent(e); // 阻止事件传播到keypress } } $(function(){ $("input[name='text1']").keydown(function(e) { digitInput(e); }); }); 2. keypress 捕获的是单个字符,且捕获的键有限,不适合作为限制输入触发事件。 3. keyup 触发时,键对应的字符已经插入到文本框中,这时中断事件是不起作用的。可行方案是替换非数字为空字符,但有明显的替换痕迹: Js代码 收藏代码 function digitInput(el, e) { var val = el.val(); var val2 = val.replace(/[^\d]/g, ''); el.val(val2); } $(function(){ $("input[name='text1']").keyup(function(e) { digitInput($(this), e); }); }); 4、将input type指定为number,但是后面会有增加减少的按钮,如果想去除这个后面的增加减少按钮可以定位一个背景为白色的元素盖住那个按钮就好了,这样即看不到,又无法接受点击事件。
相关文章推荐
- 限制HTML的文本输入框只能输入数字的4种方法
- 新的限制Text文本只能输入数字的方法
- js限制文本框只能输入数字方法小结
- 限制文本输入框只能输入0-9数字
- html中radio单选和文本框限制只能输入数字的解决方案
- Js实现限制文本框只能输入字母或数字的方法总结
- 限制编辑框的输入字符,只能输入数字、大小写字母、下划线和退格键
- HTML 限制文本框只能输入特定字符(比如数字 onkeyup+onafterpaste)
- JS限制文本框只能输入数字和字母方法
- HTML 限制文本框只能输入特定字符(比如数字 onkeyup+onafterpaste)
- HTML 限制文本框只能输入数字 onkeyup+onafterpaste
- 限制HTML的input只能输入数字、英文、汉字...
- 限制HTML的input只能输入数字、英文、汉字...
- [Javascript]限制文本输入框只能输入0-9数字
- OSX和JAVA环境下分别设置输入框只能输入数字并限制字数的方法
- HTML中限制用户只能输入数字或字母的代码规范
- 限制HTML的input只能输入数字、英文、汉字...
- 限制输入框只能输入数字的简单方法
- 限制文本输入框中只能输入数字0到9
- MFC限制编辑框只能输入数字