代码片断之jQuery掌握input只能输入数字和两位小数

2019年9月1日 321次阅读 来源: gxcuizy

《代码片断之jQuery掌握input只能输入数字和两位小数》

媒介

做为一个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

    原文作者：gxcuizy
    原文地址: https://segmentfault.com/a/1190000019199759
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞