控制input只能输入数值

要求

页面中input输入框。输入时候判断输入的规则是否正确。规则如下

  • 输入的数值在1~10000之间;最多两位小数
  • 最好禁止中文输入法
  • 禁止粘贴

分析

事件可以使用keypress、keydown、keyup等,也可以检测input输入框变化事件。不能使用change事件(此事件貌似仅在焦点离开这个输入框的时候才触发)
判断输入的字符。符合相应规则,继续执行;不符合规则,阻止默认行为
禁止粘贴使用onpaste="return false;"阻止默认行为
禁止中文使用css3属性ime-mode:disabled(此方法在新Chrome浏览器中已经不支持)

实现一

<input type="text" id="mywant_money" placeholder="请输入金额" onpaste="return false;"> <script type="text/javascript"> $("input#mywant_money").keypress(function(event) { var getValue = $(this).val(); //控制第一个不能输入小数点"."或者"0" if(getValue.length == 0 && (event.which == 46 || event.which == 48)){ event.preventDefault(); return; } //控制只能输入一个小数点"." if (getValue.indexOf('.') != -1 && event.which == 46) { event.preventDefault(); return; } //控制只能输入的值 if (event.which && (event.which < 48 || event.which > 57) && event.which != 8 && event.which != 46) { event.preventDefault(); return; } if(event.which != 46 && event.which >= 48 && event.which <= 57 && ((parseFloat(getValue) * 10 + event.which - 48) > 10000) && getValue.indexOf('.') == -1){ //getValue = getValue.substring(0, getValue.length - 1); layer.msg("补贴花费不能超过1万元哦!" , {icon: 2 , shade: 0.3 , closeBtn: 1 }); event.preventDefault(); return; } if (getValue.indexOf('.') != -1 && getValue.toString().split(".")[1].length >= 2){ event.preventDefault(); return; } }).css("ime-mode", "disabled"); </script>

说明:
Chrome中不能禁止中文输入,这种方式可以在输入框中输入中文

实现二

<input type="text" id="mywant_money" placeholder="请输入金额" onpaste="return false;"> <script type="text/javascript"> $("input#mywant_money").keyup(function(){ $(this).val(numValidate($(this).val())); }); function numValidate(obj){ obj = obj.replace(/[^\d.]/g,""); //清除"数字"和"."以外的字符 obj = obj.replace(/^\./g,""); //验证第一个字符是数字 obj = obj.replace(/^0/g,""); //验证第一个字符是不是0 obj = obj.replace(/\.{2,}/g,"."); //只保留第一个, 清除多余的 obj = obj.replace(".","$#$").replace(/\./g,"").replace("$#$","."); obj = obj.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3'); //只能输入两个小数 if(obj > 10000){ obj = obj.substring(0, obj.length - 1); layer.msg("补贴花费不能超过1万元哦!" , {icon: 2 , shade: 0.3 , closeBtn: 1, title: "温馨提示" }); } return obj; } </script>

说明:
在输入之后再进行判断,不合适的删除
切换到中文输入法,输入字母+space键可以处理;但输入字母+Enter键没有触发keyup事件,尚未找到原因

实现三

<input type="text" id="mywant_money" placeholder="请输入金额" onpaste="return false;"> <script type="text/javascript"> $("input#mywant_money").bind("input propertychange", function() { $(this).val(numValidate($(this).val())); }); function numValidate(obj){ obj = obj.replace(/[^\d.]/g,""); //清除"数字"和"."以外的字符 obj = obj.replace(/^\./g,""); //验证第一个字符是数字 obj = obj.replace(/^0/g,""); //验证第一个字符是不是0 obj = obj.replace(/\.{2,}/g,"."); //只保留第一个, 清除多余的 obj = obj.replace(".","$#$").replace(/\./g,"").replace("$#$","."); obj = obj.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3'); //只能输入两个小数 if(obj > 10000){ obj = obj.substring(0, obj.length - 1); layer.msg("补贴花费不能超过1万元哦!" , {icon: 2 , shade: 0.3 , closeBtn: 1, title: "温馨提示" }); } return obj; } </script>

说明:
与方法二基本相同,只是用propertychange事件和input事件响应(为了兼容不同的浏览器,这两个事件都需要响应)。
函数里面的if(obj > 10000){} 推荐使用 while(obj > 10000){}


创作不易,若本文对你有帮助,欢迎打赏支持作者!

 分享给好友: