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