美文网首页
限制金额输入框限制

限制金额输入框限制

作者: 屎香味十足 | 来源:发表于2017-11-16 21:18 被阅读0次

在PC端,后台管理项目中,经常有限制输入框只能输入金额的需求,所以在这边说一下我的实现,首先先理一下需求,需求点:

1、只能输入数字,不能输入其它字符;

2、第一位不能是小数点,且最多只能有一个小数点;

3、小数点后面最多只能有两位;

4、IE浏览器不考虑,因为已经淘汰了,这边考虑兼容firefox与chrome;

首先输入框绑定键盘事件,这边使用onkeypress事件;注意:输入框的type不能是number,不然小数点不会算进value中;

接下来就是写事件主体,这边直接上代码:

functionlimitNumber(event){

   var event=event||window.event,

   code = event.keyCode?event.keyCode:event.which, // firefox浏览器不兼容keyCode

   value = event.target.value;

   if(code ===8)return true; // firefox浏览器,当code === 8 时候,表示按了删除健;chrome则是空

       if(/\d|\./.test(String.fromCharCode(code)) ){ 

       // 小数点最多只能有一个,小数点后面最多为2位

       if((String.fromCharCode(code) ==='.'&& (value.indexOf('.') > -1|| value ==='')) ||

           (/\./.test(value) && value.split('.')[1].length===2)){

               event.preventDefault(event);

       }

       return true;

   }

   event.preventDefault(event);

}

相关文章

网友评论

      本文标题:限制金额输入框限制

      本文链接:https://www.haomeiwen.com/subject/lkbrvxtx.html