html文本框只能输入数字

进行web前端开发,会经常遇到校验文本框内容的情形.比如校验用户输入的手机号是否合法.

其实我们可以从根本上减少用户犯错的机会,比如文本框只能输入数字,若输入非数字字符,则马上被删除.

界面:

 第一个文本框,输入字母时会立即把字母替换为空字符串.

核心js方法:

Js代码  

  1. /* 
  2.  * 只能输入正整数,不能有小数点 
  3.  *  
  4.  */  
  5. onlyIntegerKeyUp=function(e){  
  6.     if(e===undefined){  
  7.         e=window.event;  
  8.     }  
  9.     var obj=e.srcElement?e.srcElement:e.target;  
  10.     var pattern = /[^\d]/ig;  
  11.     var val=obj.value;  
  12.     if(pattern.test(val)) {  
  13.         var i=getCursortPosition(e);  
  14.         obj.value=val.replace(pattern,'');  
  15.         setCaretPosition(e,i);  
  16.     }  
  17. };  
  18. /******************************************************************************* 
  19.  * 获取光标位置 
  20.  *  
  21.  * @param ctrl 
  22.  * @returns {Number} 
  23.  */  
  24. getCursortPosition=function(event) {// 获取光标位置函数  
  25.     if (event === undefined || event === null) {  
  26.         event = arguments.callee.caller.arguments[0] || window.event;  
  27.     }  
  28.     var obj = event.srcElement?event.srcElement:event.target;  
  29.     var CaretPos = 0;   // IE Support  
  30.     if (document.selection) {  
  31.         obj.focus ();  
  32.         var Sel = document.selection.createRange ();  
  33.         Sel.moveStart ('character', -obj.value.length);  
  34.         CaretPos = Sel.text.length;  
  35.     } else if (obj.selectionStart || obj.selectionStart == '0'){  
  36.         // Firefox support  
  37.         CaretPos = obj.selectionStart;  
  38.     }  
  39.   
  40.     return (CaretPos);  
  41. };  
  42. /******************************************************************************* 
  43.  * 设置光标位置 
  44.  *  
  45.  * @param ctrl 
  46.  * @returns {Number} 
  47.  */  
  48. setCaretPosition=function(event, pos){// 设置光标位置函数  
  49.     if (event === undefined || event === null) {  
  50.         event = arguments.callee.caller.arguments[0] || window.event;  
  51.     }  
  52.     var obj = event.srcElement?event.srcElement:event.target;  
  53.     if (pos > 0) {  
  54.         pos = pos - 1;//因为把不匹配的字符删除之后,光标会往后移动一个位置  
  55.     }  
  56.     if(obj.setSelectionRange){  
  57.         obj.focus();  
  58.         obj.setSelectionRange(pos,pos);  
  59.     } else if (obj.createTextRange) {  
  60.         var range = obj.createTextRange();  
  61.         range.collapse(true);  
  62.         range.moveEnd('character', pos);  
  63.         range.moveStart('character', pos);  
  64.         range.select();  
  65.     }  
  66. };  
  67. /* 
  68.  * 只能输入数字和字母 
  69.  *  
  70.  */  
  71. onlyNumAndAlphKeyUp=function(event){  
  72.     if(event===undefined){  
  73.         event=window.event;  
  74.     }  
  75.     var obj=event.srcElement?event.srcElement:event.target;  
  76.     var pattern = /[^\w]/ig;  
  77.     if(pattern.test(obj.value)) {  
  78.         var i=getCursortPosition(event);  
  79.         obj.value=obj.value.replace(pattern,'');  
  80.         setCaretPosition(event,i);  
  81.     }  
  82. };  

 

页面代码:

Html代码  

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head lang="en">  
  4.     <meta charset="UTF-8">  
  5.     <title></title>  
  6.     <script type="application/javascript" src="jquery-1.11.1.js"></script>  
  7.     <script type="application/javascript" src="comm.js"></script>  
  8. </head>  
  9. <body>  
  10. 只能输入数字: <input type="text" onkeyup="onlyIntegerKeyUp(event)"/><br>  
  11. <br>  
  12. 只能输入数字和字母: <input type="text" onkeyup="onlyNumAndAlphKeyUp(event)"/><br>  
  13. </body>  
  14. </html>  

 

为什么会有getCursortPosition()和setCaretPosition() 

因为通过js替换非法字符之后,光标的位置变化了.所以这两个方法用于在替换之前保存(记录)光标位置,替换之后恢复光标位置.

时间： 2024-07-28 20:59:24

html文本框只能输入数字的相关文章

jquery实现文本框只能输入数字

如下是例子的部分代码(2个方法都可以) <script type="text/javascript"> $(document).ready(function() { onlyNum("test"); } //文本框只能输入数字,不能输入小数点和字母 by john function onlyNum(id){ $("#"+id).keydown(function(event) { var keyCode = event.which; i

文本框只能输入数字网页代码

 方法一.四事件组合完合可以实现文本框只能输入数字 <input type="text" onkeypress = 'return /^d$/.test(String.fromCharCode(event.keyCode))' oninput= 'this.value = this.value.replace(/D+/g, "")' onpropertychange='if(!/D+/.test(this.value)){return;};this.value

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

 限制文本框只能输入数字 <input onkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execCommand('undo')"> <input name=txt1 onchange="if(/D/.test(this.value)){alert('只能输入数字');this.value='';}">

JQuery限制文本框只能输入数字和小数点的方法

 这篇文章主要介绍了JQuery限制文本框只能输入数字和小数点的方法,大家参考使用吧   代码如下: $(function(){                  /*JQuery 限制文本框只能输入数字*/               $(".NumText").keyup(function(){                         $(this).val($(this).val().replace(/D|^0/g,''));                   }).b

JS限制文本框只能输入数字和字母方法

 这篇文章主要介绍了JS限制文本框只能输入数字和字母方法,本文给出了限制只能输入数字.限制只能输入字母.限制只能输入数字和字母3种脚本,需要的朋友可以参考下     限制只能输入数字   代码如下: // ---------------------------------------------------------------------- // <summary> // 限制只能输入数字 // demo: $(".onlyNum").onlyNum(); 限制使用了o

javascript-如何用Js实现文本框只能输入数字且只能输入1-15号数字，且大于15设值为15，小于1设值为1

问题描述 如何用Js实现文本框只能输入数字且只能输入1-15号数字,且大于15设值为15,小于1设值为1 如何用Js实现文本框 ①只能输入数字 ②只能输入1-15号数字 ③且大于15设值为15,小于1设值为1? ④不能支持粘贴操作, 原本用正则表达式表示为如下,只能实现仅输入两位数字,不能粘贴,不能输入其他数字以外字符 用正则实现了①④如何实现②③???? <input type="text" onkeyup="this.value=this.value.replace

jquery限定文本框只能输入数字（整数和小数）_jquery

本文实例介绍了jquery限定文本框只能输入数字的详细代码,分享给大家供大家参考,具体内容如下 先来一段规定文本框只能够输入数字包括小数的jQuery代码: <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title></title> <script type="text/javascript" src="mytest

客户端 文本框只能输入数字的验证（测试）

问题描述 下面这个代码实现的功能是:客户端验证,文本框只能输入数字,不能输入字母,小数点,汉字和其他符号,并禁止粘贴.<inputtype="text"onkeypress="if(event.keyCode<48||event.keyCode>57)event.returnValue=false;"onpaste="return!clipboardData.getData('text').match(/D/)"Style=&q

jQuery+正则+文本框只能输入数字的实现方法_jquery

网站中的一个小功能:要求用户只能输入16位数字. 试过javascript的方法: 如:一种方法: //只允许输入数字 function checkkey2(value, e) { var key = window.event ? e.keyCode : e.which; if ((key > 95 && key < 106) || (key > 47 && key < 60)) { } else if (key != 8) { if (window