首页 > Web开发 > 详细

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

时间:2015-11-05 22:11:37      阅读:310      评论:0      收藏:0      [点我收藏+]

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

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

原文:http://www.cnblogs.com/mjfmei/p/4940669.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!