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