文本框如何限制只能够输入数字

文本框如何限制只能够输入数字:
在某些需求下,文本框的内容只允许被输入数字,例如手机号码或者身份证号码等等,下面就通过一个实例简单介绍一下如何实现此效果,代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>文本框只能输入数字-蚂蚁部落</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
  var phone=$(‘#phone‘);
  $(phone).on(‘click‘,function(){
    phone.val(‘‘);
  })
  $(phone).on(‘keyup‘,function(evt){
    var phoneVal=phone.val();
    phoneVal=phoneVal.replace(‘/[^\d]+/g‘, ‘‘);
    phoneVal=parseInt(phoneVal,10);
    if(isNaN(phoneVal))
    {
      phoneVal=‘‘;
    }
    this.value=phoneVal;
  })
})
</script>
</head>
<body>
<input type="text" id="phone"/>
</body>
</html> 

以上代码实现了我们的需求,当在文本框输入非数字内容的时候会被自动清除,下面就介绍一下实现过程:
一.实现原理:
在代码中,使用on()函数为文本框注册click事件处理函数,当点击文本框的时候,能够将文本框中的内容情况,然后再为文本注册keyup事件处理函数,当按键松开的时候,可以获取文本框输入的内容,然后通过replace函数结合正则表达式匹配原则将非数字元素替换为空,大体是如此,具体可以参阅下面的代码注释。
二.代码注释:
1.jQuery(document).ready(function($){}),当文档结构完全加载完毕之后再去执行函数中的代码。
2.var phone=$(‘#phone‘),获取id属性值为phone的对象。
3.$(phone).on(‘click‘,function(){}),使用on为元素注册click事件处理函数。
4.phone.val(‘‘),将文本框内的值设置为空。
5.$(phone).on(‘keyup‘,function(evt){}),使用on为元素祖册keyup事件处理函数,函数的参数为事件对象,这里没有用到,可以去掉。
6.var phoneVal=phone.val(),获取文本框的内容。
7.phoneVal=phoneVal.replace(‘/[^\d]+/g‘, ‘‘),将文本框中的内容中非数字元素替换为空。
8.phoneVal=parseInt(phoneVal,10),将数字转换为数值类型。
9.if(isNaN(phoneVal)),检测参数是否为非数值类型。
10.phoneVal=‘‘,将内容设置为空。
11.this.value=phoneVal,将文本框中的内容设置为处理后的phoneVal。
三.相关阅读:
1.on函数可以参阅jQuery的on()方法一章节。
2.val()函数可以参阅jQuery的val()方法一章节。
3.keyup事件可以参阅jQuery的keyup事件一章节。
4.parseInt()函数可以参阅JavaScript的parseInt()函数一章节。
5.isNaN()函数可以参阅JavaScript的isNaN()方法一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8796\

跟多内容可以参阅:http://www.softwhy.com/jquery/

时间: 2024-10-10 23:37:18

文本框如何限制只能够输入数字的相关文章

文本框如何限制只能够输入数

文本框如何限制只能够输入数字:在某些需求下,文本框的内容只允许被输入数字,例如手机号码或者身份证号码等等,下面就通过一个实例简单介绍一下如何实现此效果,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" />

规定文本框只能够输入数字包括小数的jQuery代码

规定文本框只能够输入数字包括小数的jQuery代码:文本框有时候规定只能够输入整数,这里就不多介绍了,具体可以参阅jQuery如何规定文本框只能输入整数一章节,不过有时候也可以输入小数,下面就通过代码实例介绍一下如何实现此功能.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="

WinForm笔记一:文本框只允许输入数字

在WinForm的文本框中,有时候只允许数字,而不能输入除数字以外的其他字符,要调用TextBox的KeyPress事件,代码如下: //只允许输入数字 if (e.KeyChar<'0'||e.KeyChar>'9') { e.Handled = true; } //允许输入退格键 if (e.KeyChar == 8) { e.Handled = false; } TextBox tBox = sender as TextBox;        //哪个文本框调用,tBox 就是哪个文本框

文本框只同意输入数字

文本框只同意输入数字.net/javascript <input type="text" name="test" onKeyUp="test1.value=(this.value=this.value.replace(/\D/g,'').substring(0,6)).substring(0,3)" > <br /> <input name="test1" type="text"

js限制文本框只可以输入数字

//只可以输入数字 function getEvent() { if (document.all) { return window.event; //for ie } func = getEvent.caller; while (func != null) { var arg0 = func.arguments[0]; if (arg0) { if ((arg0.constructor == Event || arg0.constructor == MouseEvent) || (typeof

第一个app-进阶:1、让EditText屏蔽软键盘仍能光标闪动:2、EditText 的inputType参数类型(密码方式-隐藏显示、只允许输入数字等等)

EditText屏蔽软键盘后,光标消失问题 开始我有个需求:屏蔽系统软键盘 于是找到并使用这个方法: //edit_text1.setInputType(InputType.TYPE_NULL); //屏蔽软键盘弹出//edit_text2.setInputType(InputType.TYPE_NULL); //屏蔽软键盘弹出//edit_text3.setInputType(InputType.TYPE_NULL); //屏蔽软键盘弹出 让三个EditText都成功地没有软键盘弹出. 后来我

如何验证文本框中的内容是否为数字

如何验证文本框中的内容是否为数字:在某些情况下可能需要让文本框中的内容只能够输入数字,例如手机号码或者邮编之类的,下面简单介绍一下如何实现此功能.下面是验证数字的正则表达式: "^\\d+$" //非负整数(正整数 + 0) "^[0-9]*[1-9][0-9]*$" //正整数 "^((-\\d+)|(0+))$" //非正整数(负整数 + 0) "^-[0-9]*[1-9][0-9]*$" //负整数 "^-?\

ASP.Net TextBox控件只允许输入数字

原文:ASP.Net TextBox控件只允许输入数字 1.1.在Asp.Net TextBox 控件的 OnKeyPress 事件中指定输入键盘码必须为数字: <asp:TextBox ID="TextBox" runat="server" OnKeyPress="if(((event.keyCode>=48)&&(event.keyCode <=57))||(event.keyCode==46)) {event.ret

限制UITextField只可以输入数字

今天项目中有个文本框需要只可以输入数字的需求,首先在.xib中将UITextField的Keyboard设置为Number Pad,但是使用时键盘会切回别的键盘无法对内容进行校验.通过神奇的百度我知道了通过以下方法可以解决这样的问题: 首先让.xib的viewController实现UITextFieldDelegate然后和想要校验的控件关联. 然后将下列代码粘贴到类中即可. - (BOOL)textField:(UITextField *)textField shouldChangeChar