代码片段之jQuery控制input只能输入数字和两位小数

2019-05-16 admin

page_img

前言

做为一个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,"")' />

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

最后

这就是我分享CODING过程中的一些代码片段,有不对或者需要优化的地方,大家可以给我留言。

感谢http://www.cnblogs.com/angto64/p/5459496.html

[转载]原文链接:https://segmentfault.com/a/1190000019199759

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-65091.html

文章标题:代码片段之jQuery控制input只能输入数字和两位小数

相关文章
AngularJS vs. jQuery,看看谁更胜一筹
很多Web开发新手都会有这样的疑问“我应该使用什么开发框架呢,如何快速学会Web开发呢?”这个问题其实没有一个统一的正确答案,其中讨论最多的就是AngularJS和jQuery的差别。这两者的之间的比较很微妙,有时就像拿苹果和橘子在作比较,...
2015-11-12
jQuery中DOM树操作之使用反向插入方法实例分析
本文实例讲述了jQuery中DOM树操作之使用反向插入方法。分享给大家供大家参考。具体分析如下: 使用反向插入方法 这里我们先把创建的内容插人到元素前面,然后再把同一个元素插人到文档 中的另一个位置。通常,当在jQuery中操作元素时,利用...
2015-11-13
JavaScript短路原理精简代码
js中||和&amp;&amp;的特性帮我们精简了代码的同时,也带来了代码可读性的降低,虽然高效,但请灵活使用。 在js逻辑运算中,0、&quot;&quot;、null、false、undefined、NaN都会判为false,其他都为t...
2015-11-12
JavaScript游戏之连连看源码分享
JavaScript游戏之连连看源码 下载地址:JavaScript游戏之连连看源码 解压密码:www.javascriptcn.com ...
2015-11-12
如何编写干净高效的CSS代码
其实CSS的学习并不困难,但在一些较为大型的项目中就显得杂乱无章,变得很难管理,尤其是不同的人编写CSS的风格总会略有不同,从团队合作的层面上来说,就更加难以沟通,所以,我们为此总结了一些如何实现高效整洁的CSS代码原则: 使用Reset但...
2015-11-12
网站变灰代码
html { filter: grayscale(100%);&#x2F;&#x2F;IE浏览器 -webkit-filter: grayscale(100%);&#x2F;&#x2F;谷歌浏览器 -moz-filter: g...
2015-11-12
jQuery中DOM树操作之复制元素的方法
本文实例讲述了jQuery中DOM树操作之复制元素的方法。分享给大家供大家参考。具体分析如下: 复制元素 前面提到的操作包括:插人新创建的元素、将元素从文档中的一个位置移动 到另一个位置,以及通过新元素来包装已有的元素。可是,有时候也会用到...
2015-11-13
Node.js的不足之处
跨平台编程能力不够强大 Bowery团队指出Go能很方便地在不同系统里进行程序编译,这是他们转入Go的重要原因之一。 作为开发平台,对Linux,Windows,OSX等常见操作系统提供支援是能否吸引开发者的基本要素。在Go中,开发者可以针...
2015-11-12
js监听input输入框值的实时变化实例
1、在元素上同时绑定 oninput 和onporpertychanger事件 例: &lt;script type=&quot;text&#x2F;JavaScript&quot;&gt; function aa(e){alert(&qu...
2017-02-16
2015 Web 2.0和AJAX如何做好优化
2015如何让做好web2.0和ajax的优化?JavaScript中文网总结当下提出以下四大优化意见,旨在帮助W前端开发人员有效利用APM解决上述问题。 随着Web应用程序速度与效率快速增长,网站已经成为企业与其客户进行交互的第一途径——...
2015-11-12
回到顶部