经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » jQuery » 查看文章
jQuery控制input只能输入数字和两位小数的方法
来源:jb51  时间:2019/5/17 8:28:55  对本文有异议

前言

做为一个PHPER,难免会遇到那种表单中jQuery限制输入的问题,比如,限制空格的输入,只允许输入数字,以及小数点的控制等等,这里,我们就说一下数字的限制。

jquery代码

话不多说,直接先上jQuery函数,具体的可以看注释说明,在使用这个之前,请务必保证已经提前引入了jQuery库,大家可以自己下载一个jQuery文件,然后引入,也可以查找CDN地址引入,比如在 https://www.bootcdn.cn/jquery/ 可以查找到很多版本的引入地址,直接找到你想要的引入就行。

  1. <script>
  2. // 格式化限制数字文本框输入,只能数字或者两位小数
  3. function format_input_num(obj){
  4. // 清除"数字"和"."以外的字符
  5. obj.value = obj.value.replace(/[^\d.]/g,"");
  6. // 验证第一个字符是数字
  7. obj.value = obj.value.replace(/^\./g,"");
  8. // 只保留第一个, 清除多余的
  9. obj.value = obj.value.replace(/\.{2,}/g,".");
  10. obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
  11. // 只能输入两个小数
  12. obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');
  13. }
  14. </script>

函数的直接用法之onkeyup

在input表单输入中,限制最多只能保留两位小数点,其他自动抹掉;这里会用到onkeyup事件,也就是onkeyup事件会在键盘按键被松开时发生,也就是,这个时候调用我们的函数,来处理已输入的内容。

  1. <input type="text" onkeyup="format_input_num(this)" value="" size="10" />

函数的直接用法之blur

除了上面的监控键盘事件外,还可以通过监控表单的焦点事件来实现,也就是,表单都有获得焦点事件focus和失去焦点事件blur,我们只需要在失去焦点的时候,调用我们的format_input_num函数就可以了,具体如下:

  1. <input type="text" onblur="format_input_num(this)" value="" size="10" />

或者不在表单中直接绑定方法,而是去jQuery中通过查找元素节点,然后单独绑定相应的事件,并执行相关函数

  1. <input type="text" value="" size="10" id="money" />
  2. <script>
  3. $("#money").off('blur').on('blur', function(){
  4. format_input_num(this);
  5. });
  6. </script>

其他输入限制

限制只能输入数字的写法,也就是,只能输入0-9的数字

  1. <input type="text" onkeyup='this.value=this.value.replace(/\D/gi,"")' />

限制只能输入数字、字母和横线"-",其中字母包括大小写

  1. <input type="text" onkeyup='value=value.replace(/[^A-Za-z0-9\-]+/g,"")' />

当然了,还有其他很多校验规则,可以自己根据实际需求进
行修改和尝试一下

最后

以上所述是小编给大家介绍的jQuery控制input只能输入数字和两位小数的方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号