jQuery控制input只能输入数字和两位小数的方法


Posted in jQuery onMay 16, 2019

前言

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

jquery代码

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

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

函数的直接用法之onkeyup

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

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

函数的直接用法之blur

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

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

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

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

其他输入限制

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

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

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

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

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

最后

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

jQuery 相关文章推荐
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
jQuery zTree树插件动态加载实例代码
May 11 jQuery
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
jQuery实现图片简单轮播功能示例
Aug 13 jQuery
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
jQuery选择器之层次选择器用法实例分析
Feb 19 jQuery
jQuery实现的记住帐号密码功能完整示例
Aug 03 jQuery
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 jQuery
jquery传参及获取方式(两种方式)
Feb 13 jQuery
如何解决jQuery 和其他JS库的冲突
Jun 22 jQuery
Vue项目中使用jquery的简单方法
May 16 #jQuery
JQuery常见节点操作实例分析
May 15 #jQuery
JQuery属性操作与循环用法示例
May 15 #jQuery
jquery+css实现Tab栏切换的代码实例
May 14 #jQuery
jquery实现二级导航下拉菜单效果实例
May 14 #jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 #jQuery
jquery 验证用户名是否重复代码实例
May 14 #jQuery
You might like
一篇不错的PHP基础学习笔记
2007/03/18 PHP
关于PHP内存溢出问题的解决方法
2013/06/25 PHP
php中如何防止表单的重复提交
2013/08/02 PHP
php快速查找数据库中恶意代码的方法
2015/04/01 PHP
PHP静态成员变量和非静态成员变量详解
2017/02/14 PHP
Display SQL Server Version Information
2007/06/21 Javascript
jquery 插件 人性化的消息显示
2008/01/21 Javascript
JavaScript 的方法重载效果
2009/08/07 Javascript
JavaScript实现快速排序的方法
2015/07/31 Javascript
纯javascript移动优先的幻灯片效果
2015/11/02 Javascript
javascript电商网站抢购倒计时效果实现
2015/11/19 Javascript
个人网站留言页面(前端jQuery编写、后台php读写MySQL)
2016/05/03 Javascript
angular 动态组件类型详解(四种组件类型)
2017/02/22 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
2017/03/29 Javascript
一步步教你利用Docker设置Node.js
2018/11/20 Javascript
JavaScript switch语句使用方法简介
2019/12/30 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
2020/06/19 Javascript
浅谈Python单向链表的实现
2015/12/24 Python
Python将一个Excel拆分为多个Excel
2018/11/07 Python
对Python闭包与延迟绑定的方法详解
2019/01/07 Python
pytorch使用Variable实现线性回归
2019/05/21 Python
python实现程序重启和系统重启方式
2020/04/16 Python
PyQt5如何将.ui文件转换为.py文件的实例代码
2020/05/26 Python
全球领先的鞋类零售商:The Walking Company
2016/07/21 全球购物
美国最大的宠物药店:1-800-PetMeds
2016/10/02 全球购物
策划主管的工作职责
2013/11/24 职场文书
食堂员工工作职责
2013/12/18 职场文书
干部培训自我鉴定
2014/01/22 职场文书
大专生自我评价
2014/01/28 职场文书
四年级语文教学反思
2014/02/05 职场文书
党员干部承诺书
2014/03/25 职场文书
小摄影师教学反思
2014/04/27 职场文书
关于工作时间玩手机的检讨书
2014/09/18 职场文书
小学优秀教师事迹材料
2014/12/16 职场文书
小学科学教学计划
2015/01/21 职场文书
写作指导:怎么书写竞聘演讲稿?
2019/07/04 职场文书