限制文本框只能输入数字的解决方法

Question

限制文本框只能输入数字，这个功能在很多地方会用到，如果量比较少，可以使用按钮让用户用鼠标点击增减，但是需要用户使用键盘输入的地方，我们就需要使用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并没有被调用。