js简单实现输入框只能输入整数或小数

我们常遇到一些情况下需要即时的检查输入框输入的内容，保证输入框的内容不能是非法数字，想过各种方案（keyup事件捕获按键什么的，各种判断啊！）要把小键盘、大键盘、ctrl+v、delete、insert、backspace、小数点个数。。。各种情况考虑进去，好痛苦啊！

下面我来分享我自己做的一个方法，大家分享一下（js不熟，不知道有没有现成的框架可以实现我的需求，只能自己写了）

<script type="text/javascript">
//仅允许输入整数
function propertyChangeToInt(){
    var val = $(this).val();
    var val_int = parseInt(val);
    if(!val_int){
    　　val_int='';
    }
    if(val_int != val){
    　　//先解绑再重绑，避免递归调用
    　　$(this).unbind('propertychange');
    　　$(this).unbind('input');
    　　$(this).val(val_int);
    　　$(this).bind('propertychange',propertyChangeToInt);
    　　$(this).bind('input',propertyChangeToInt);
　　}
}
function propertyChangeToNum(){
    var val = $(this).val();
    if(val=='0'){
        return ;
    }
    if(val.indexOf('.')==val.length-1){
        return ;
    }
    var val_float = parseFloat(val);
    if(!val_float){
        val_float='';
    }
　　 if(val_float != val){
    　　//先解绑再重绑，避免递归调用
    　　$(this).unbind('propertychange');
    　　$(this).unbind('input');
    　　$(this).val(val_float);
    　　$(this).bind('propertychange',propertyChangeToNum);
    　　$(this).bind('input',propertyChangeToNum);
　　}
}
//重写bind方法
function bind(ev, func) {
    if(!window.addEventListener) {
        header.attachEvent("on" + ev, func);
    } else {
        header.addEventListener(ev, func, false);
    }
}
$('.onlyInt').bind('propertychange',propertyChangeToInt);
$('.onlyInt').bind('input',propertyChangeToInt);         $('.onlyNum').bind('propertychange',propertyChangeToNum);
$('.onlyNum').bind('input',propertyChangeToNum);
</javascript>

整数1：<input class="onlyInt" value=""/>
整数2：<input class="onlyInt" value=""/>

小数1：<input class="onlyNum" value=""/>
小数2：<input class="onlyNum" value=""/>

在IE、Firefox、chrome下测试有效

转载于:https://www.cnblogs.com/mjfmei/p/4940669.html