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

时间:2022-11-06 07:52:45

我们常遇到一些情况下需要即时的检查输入框输入的内容,保证输入框的内容不能是非法数字,想过各种方案(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下测试有效