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

前言

作为一个PHPER，不免会遇到那种表单中jQuery限制输入的问题，好比，限制空格的输入，只容许输入数字，以及小数点的控制等等，这里，咱们就说一下数字的限制。

jquery代码

话很少说，直接先上jQuery函数，具体的能够看注释说明，在使用这个以前，请务必保证已经提早引入了jQuery库，你们能够本身下载一个jQuery文件，而后引入，也能够查找CDN地址引入，好比在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过程当中的一些代码片断，有不对或者须要优化的地方，你们能够给我留言。

感谢www.cnblogs.com/angto64/p/5…