标签：
文本框如何限制只能够输入数字:
在某些需求下，文本框的内容只允许被输入数字，例如手机号码或者身份证号码等等，下面就通过一个实例简单介绍一下如何实现此效果，代码实例如下:
<!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/
标签：
原文地址：http://www.cnblogs.com/zhengzebiaodashi/p/5081770.html
