input输入限制,只接受数字

时间 2019-11-13

标签 input 输入限制接受数字繁體版

原文原文链接

一需求

限制input的输入,只接收数字和小数点
限制输入位数

二分析

我的观点:这是一个坑爹的需求,限制输入有不少bug,并且用户体验也不好,监听keypress事件会浪费不少性能

实现原理:虽然很坑爹,可是仍是要作一下的,实现原理就是经过键盘的监听,阻止没必要要的输入

实现方式:jQuery插件方式,如今工做中基本离不开jQuery,虽然有人说这很很差,可是我必须的用啊,由于我很low

三代码和注释

基本上注释已经很全面了

基本上逻辑仍是有点混乱的,只供参考,不喜欢的需求也就能搞成这样了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test input</title>
    <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script>
    <script type="text/javascript">
    ;(function($){
        $.fn.extend({
            numberInput:function(zs,xs){
                //取节点,并过滤出 text和number
                node = $(this).filter("input[type='text'],input[type='number']");
                //检测节点,若是没有合适的节点,啥也不干
                if(!node.length) return;

                //整数部分默认值为1 ,若是输入0也会变成1
                zs = zs || 1;

                //小数位默认值是0
                xs = xs || 0;

                //绑定事件,绑定以前先解绑一下,省得重复绑定
                node.off("keypress.sjsplugin")


                //有小数部分和没有小数部分,绑定不一样的函数,提升效能
                if(xs != 0){
                    node.on("keypress.sjsplugin",function(e) {
                        var keyCode = e.keyCode;  //保存keyCode
                        //获取当前输入状态
                        var text = $(this).val();
                        //只接收数字和小数点
                        if(!((keyCode>47 && keyCode<58) || keyCode == 46)){
                            e.preventDefault(); 
                        }

                        //匹配后只接受数字
                        var intParten = new RegExp("^\\d{1,"+ zs +"}\\.","i");
                        //匹配后只接受小数点
                        var intParten1 = new RegExp("^(\\d{"+ zs +"})|(0)$","i");
                        //匹配后结束输入
                        var numberParten = new RegExp("^\\d{1,"+ zs +"}\\.\\d{"+ xs +"}$","i");
                        
                        //没有输入的时候,或者已经输入了数字和小数点,则不能再输入小数点
                        if((text.length == 0 || intParten.test(text))&& keyCode == 46){
                            e.preventDefault();
                        }
                        //若是输入了足够多的数字或者第一位输入了0 则只能输入小数点
                        if (intParten1.test(text) && (keyCode != 46)) {
                            e.preventDefault();
                        }
                        //若是输入已经符合 XX.XX 的格式,则拒绝全部输入
                        if (numberParten.test(text)){
                            e.preventDefault();
                        }
                        
                    });
                }else{
                    node.on("keypress.sjsplugin",function(e) {
                        var keyCode = e.keyCode;  //保存keyCode
                        //获取当前输入状态
                        var text = $(this).val(); 
                        //只接收数字,不接收小数点
                        if(!(keyCode>47 && keyCode<58)){
                            e.preventDefault(); 
                        }
                        //没有小数部分
                        var intParten = new RegExp("^\\d{"+ zs +"}$","i"); 
                        //若是输入已经符合格式,则拒绝全部输入
                        if (intParten.test(text)){
                            e.preventDefault();
                        }
                    });
                }
            }
        });

    })(jQuery);
    
    //使用方法
    $(function(){
        $(".didgit_input").numberInput(2,3);    //起做用
    });
    </script>
</head>
<body>
    <input type="text" class="didgit_input">
    <input type="number" class="didgit_input">
    <input type="password" class="didgit_input">
</body>
</html>

后记

使用过程当中发现 keypress 在手机端行为诡异,在QQ手机浏览器中没法使用,因此若是你想在手机端使用,须要考虑别的事件来代替 keypressjavascript

input输入限制,只接受数字

一 需求

二 分析

三 代码和注释

后记

一需求

二分析

三代码和注释