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.load()和Jsp的include的区别
Apr 12 jQuery
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
jQuery插件开发发送短信倒计时功能代码
May 09 jQuery
jquery网页加载进度条的实现
Jun 01 jQuery
使用jQuery实现页面定时弹出广告效果
Aug 24 jQuery
jQuery中库的引用方法
Jan 06 jQuery
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 jQuery
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
jquery的$().each和$.each的区别
Jan 18 jQuery
jquery向后台提交数组的代码分析
Feb 20 jQuery
jQuery实现鼠标拖动图片功能
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
yii操作session实例简介
2014/07/31 PHP
php+ajax 实现输入读取数据库显示匹配信息
2015/10/08 PHP
php5.2的curl-bug 服务器被php进程卡死问题排查
2016/09/19 PHP
个人总结的一些关于String、Function、Array的属性和用法
2007/01/10 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
2015/05/25 Javascript
arguments对象验证函数的参数是否合法
2015/06/26 Javascript
实现音乐播放器的代码(html5+css3+jquery)
2015/08/04 Javascript
nodejs搭建本地http服务器教程
2017/03/13 NodeJs
Vue Transition实现类原生组件跳转过渡动画的示例
2017/08/19 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
2017/09/20 Javascript
jQuery基于cookie实现换肤功能实例
2017/10/14 jQuery
初识 Vue.js 中的 *.Vue文件
2017/11/22 Javascript
JS实现的RC4加密算法示例
2018/08/16 Javascript
javascript关于“时间”的一次探索
2019/07/24 Javascript
layui表格分页 记录勾选的实例
2019/09/02 Javascript
node.js开发辅助工具nodemon安装与配置详解
2020/02/06 Javascript
JSON stringify方法原理及实例解析
2020/10/23 Javascript
[00:12]DAC2018 天才少年转战三号位,他的SOLO是否仍如昔日般强大?
2018/04/06 DOTA
[01:04]不如跳舞!DOTA2新英雄玛尔斯的欢乐日常
2019/03/11 DOTA
[01:06] DOTA2英雄背景故事第三期之秩序法则光之守卫
2020/07/07 DOTA
Python多线程编程(二):启动线程的两种方法
2015/04/05 Python
基于Python中求和函数sum的用法详解
2018/06/28 Python
浅析Python函数式编程
2018/10/06 Python
python实现飞机大战游戏
2020/10/26 Python
Python 分发包中添加额外文件的方法
2019/08/16 Python
Python2.x与3​​.x版本有哪些区别
2020/07/09 Python
CSS3 flex布局之快速实现BorderLayout布局
2015/12/03 HTML / CSS
HTML5标签小集
2011/08/02 HTML / CSS
HTML5 Canvas 实现K线图的示例代码
2019/12/23 HTML / CSS
韩国CJ食品专卖网:CJonmart
2016/09/11 全球购物
C#中有没有静态构造函数,如果有是做什么用的?
2016/06/04 面试题
老总助理工作岗位职责
2014/02/06 职场文书
小学教育见习总结
2015/06/23 职场文书
班委竞选稿范文
2015/11/21 职场文书
Win10防火墙白名单怎么设置?Win10添加防火墙白名单方法
2022/04/06 数码科技
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
2022/09/23 HTML / CSS