如题所述
限制文本框只能输入数字，这个功能在很多地方会用到，如果量比较少，可以使用按钮让用户用鼠标点击增减，但是需要用户使用键盘输入的地方，我们就需要使用JavaScript脚本来限制输入了。
1、在输入的时候验证
我们都知道键盘上的每一个键位都是有编号的，对应的事件就是event.keyCode，而数字键的键位范围是[48,57]，这样我们就可以在用户输入的时候，阻止非数字的输入。
假如我们有一下的一个文本框，我们需要判断输入是否为数字
<input type="text" id="text" value="0"/>
我们以整个文档为目标，编写一个函数来获取键盘输入事件
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 (arg0) == "object" && arg0.preventDefault && arg0.stopPropagation)){ return arg0; } } func = func.caller; } return null;}
根据上面的函数返回值，判断当前输入的数字是否为数字，如果不是数字就返回False
function doit(){ var ev = getEvent(); if(ev.charCode < 48 || ev.charCode > 57) return false;}
最后给文本框添加onKeyPress事件，调用doit()函数，判断当前的输入字符。
<input type="text" id="text" onkeypress="return doit()">
注意：经过测试，网上介绍的keyCode属性在火狐下一直为0，不知道为什么会这样，不过所有浏览器都会返回一个charCode属性，通过判断这个属性来实现兼容。
PS：其实应该在用户输入不合法的字符以后，给予用户合理的提示，引导用户输入正确的字符，而不是直接阻止用户的输入，提高页面的用户体验。
弊端：在纯英文下输入是没有问题的，但是如果用户开启了输入法，从输入法选词输入，就无法判断了。
2、在输入完成以后循环验证
多数网上实现的方法，都是在输入完成以后验证，最简单的方法就是使用isNaN()函数，但是如果中间夹杂了数字英文就无法判断了，那我们可以将字符都打散，然后逐一判断。
还是上面的文本框，我们给他添加一个onKeyUp事件，每当有键按下弹起的时候调用我们的自定义函数。
<input type="text" id="text" onkeyup="this.value = checkNum(this)">
我们编写一个检测数字的函数，使用split()将字符串转换为数组，循环这个数组，将不是数字的字符过滤掉。
function checkNum(num){ oldString = num.value.split(''); if(!(oldString == 'undefined')){ var newString = '' for( i = 0; i < oldString.length; i++ ){ if(!isNaN(oldString[i])){ newString += oldString[i] } } return newString; }}
3、在输入完成以后正则验证
这个方法和上面的方法基本相同，只是在验证是不是数字的时候略有不同，而且更加的简单、粗暴、高效。
一些判断数字的正则表达式
"^\\d+$"//非负整数（正整数 + 0）"^[0-9]*[1-9][0-9]*$" //正整数"^((-\\d+)|(0+))$" //非正整数（负整数 + 0）"^-[0-9]*[1-9][0-9]*$" //负整数"^-?\\d+$" //整数"^\\d+(" //非负浮点数（正浮点数 + 0）"^(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*))$"//正浮点数"^((-\\d+(" //非正浮点数（负浮点数 + 0）"^(-(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*)))$" //负浮点数"^(-?\\d+)(" //浮点数
下面是一个截取一段字符串里面的所有数字方法，最后再把数组转换为字符串
str ="3%(3/100)";var r = str.match(/\d+/g);newString = r.join("");
总结
无论是上面的那种方法，我们都应该给用户适当的提示，告诉用户他刚刚输入的字符不正确，而不是简单粗暴的替换不合法的字符。
方法1对于输入法输入的内容无能为力，其它的方法可有效的判断，当然我们还应该对用户粘贴的内容进行判断，对于粘贴的内容，方法1并没有被调用。
1、在输入的时候验证
我们都知道键盘上的每一个键位都是有编号的，对应的事件就是event.keyCode，而数字键的键位范围是[48,57]，这样我们就可以在用户输入的时候，阻止非数字的输入。
假如我们有一下的一个文本框，我们需要判断输入是否为数字
<input type="text" id="text" value="0"/>
我们以整个文档为目标，编写一个函数来获取键盘输入事件
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 (arg0) == "object" && arg0.preventDefault && arg0.stopPropagation)){ return arg0; } } func = func.caller; } return null;}
根据上面的函数返回值，判断当前输入的数字是否为数字，如果不是数字就返回False
function doit(){ var ev = getEvent(); if(ev.charCode < 48 || ev.charCode > 57) return false;}
最后给文本框添加onKeyPress事件，调用doit()函数，判断当前的输入字符。
<input type="text" id="text" onkeypress="return doit()">
注意：经过测试，网上介绍的keyCode属性在火狐下一直为0，不知道为什么会这样，不过所有浏览器都会返回一个charCode属性，通过判断这个属性来实现兼容。
PS：其实应该在用户输入不合法的字符以后，给予用户合理的提示，引导用户输入正确的字符，而不是直接阻止用户的输入，提高页面的用户体验。
弊端：在纯英文下输入是没有问题的，但是如果用户开启了输入法，从输入法选词输入，就无法判断了。
2、在输入完成以后循环验证
多数网上实现的方法，都是在输入完成以后验证，最简单的方法就是使用isNaN()函数，但是如果中间夹杂了数字英文就无法判断了，那我们可以将字符都打散，然后逐一判断。
还是上面的文本框，我们给他添加一个onKeyUp事件，每当有键按下弹起的时候调用我们的自定义函数。
<input type="text" id="text" onkeyup="this.value = checkNum(this)">
我们编写一个检测数字的函数，使用split()将字符串转换为数组，循环这个数组，将不是数字的字符过滤掉。
function checkNum(num){ oldString = num.value.split(''); if(!(oldString == 'undefined')){ var newString = '' for( i = 0; i < oldString.length; i++ ){ if(!isNaN(oldString[i])){ newString += oldString[i] } } return newString; }}
3、在输入完成以后正则验证
这个方法和上面的方法基本相同，只是在验证是不是数字的时候略有不同，而且更加的简单、粗暴、高效。
一些判断数字的正则表达式
"^\\d+$"//非负整数（正整数 + 0）"^[0-9]*[1-9][0-9]*$" //正整数"^((-\\d+)|(0+))$" //非正整数（负整数 + 0）"^-[0-9]*[1-9][0-9]*$" //负整数"^-?\\d+$" //整数"^\\d+(" //非负浮点数（正浮点数 + 0）"^(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*))$"//正浮点数"^((-\\d+(" //非正浮点数（负浮点数 + 0）"^(-(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*)))$" //负浮点数"^(-?\\d+)(" //浮点数
下面是一个截取一段字符串里面的所有数字方法，最后再把数组转换为字符串
str ="3%(3/100)";var r = str.match(/\d+/g);newString = r.join("");
总结
无论是上面的那种方法，我们都应该给用户适当的提示，告诉用户他刚刚输入的字符不正确，而不是简单粗暴的替换不合法的字符。
方法1对于输入法输入的内容无能为力，其它的方法可有效的判断，当然我们还应该对用户粘贴的内容进行判断，对于粘贴的内容，方法1并没有被调用。
温馨提示：答案为网友推荐，仅供参考
