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>