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解析获取JSON数据
Apr 08 jQuery
jQuery操作css样式
May 15 jQuery
jQuery实现点击关注和取消功能
Jul 03 jQuery
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
jQuery实现图片简单轮播功能示例
Aug 13 jQuery
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
jQuery插件实现图片轮播效果
Oct 19 jQuery
ajax jquery实现页面某一个div的刷新效果
Mar 04 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 session机制
2011/07/17 PHP
php修改NetBeans默认字体的大小
2013/07/02 PHP
总结PHP中数值计算的注意事项
2016/08/14 PHP
总结PHP删除字符串最后一个字符的三种方法
2016/08/30 PHP
PHP运用foreach神奇的转换数组(实例讲解)
2018/02/01 PHP
CSDN轮换广告图片轮换效果
2007/03/27 Javascript
Node.js实战 建立简单的Web服务器
2012/03/08 Javascript
zTree插件之多选下拉菜单实例代码
2013/11/06 Javascript
JavaScript日期时间格式化函数分享
2014/05/05 Javascript
一个很有趣3D球状标签云兼容IE8
2014/08/22 Javascript
用js实现简单算法的实例代码
2016/09/24 Javascript
jQuery自定义组件(导入组件)
2016/11/08 Javascript
jQuery用FormData实现文件上传的方法
2016/11/21 Javascript
深入理解Javascript箭头函数中的this
2017/02/13 Javascript
微信小程序表单验证错误提示效果
2017/05/19 Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
2018/01/26 Javascript
webpack打包node.js后端项目的方法
2018/03/10 Javascript
vue ssr服务端渲染(小白解惑)
2019/11/10 Javascript
[05:53]完美世界携手游戏风云打造 卡尔工作室观战系统篇
2013/04/22 DOTA
Python正则表达式介绍
2012/08/06 Python
python计算时间差的方法
2015/05/20 Python
Python实现数据库编程方法详解
2015/06/09 Python
Python如何快速实现分布式任务
2017/07/06 Python
python使用TensorFlow进行图像处理的方法
2018/02/28 Python
在python中利用最小二乘拟合二次抛物线函数的方法
2018/12/29 Python
Python语法之精妙的十个知识点(装B语法)
2020/01/18 Python
python简单利用字典破解zip文件口令
2020/09/07 Python
时尚设计师手表:The Watch Cabin
2018/10/06 全球购物
公司行政经理岗位职责
2013/12/24 职场文书
护理专业大学生自我推荐信
2014/01/25 职场文书
涉密人员保密承诺书
2014/05/28 职场文书
机关保密承诺书
2014/06/03 职场文书
2015年高中班主任工作总结
2015/04/30 职场文书
2015年秋学期教研工作总结
2015/10/14 职场文书
基于flask实现五子棋小游戏
2021/05/25 Python
详解php中流行的rpc框架
2021/05/29 PHP