插件：密碼輸入框

這是插件系列的第一個文章，平時工作中忙里偷閑寫了些自己的組件，現在分享一下

我的組件簡潔無依賴(不需要再引用別的庫比如JQ)用原生JS寫

組件樣式簡單，沒打算寫多漂亮重點實現功能

====== 分割線 ============

模仿支付寶密碼輸入框僅僅是功能模仿，樣式沒全部模仿； PC、移動端都能用

 

調用代碼：

new passwordInput().show({
    inputNumber: 6, // 密碼有多少位
    callback: function (data) {
        console.log('密碼：' + data)
        setTimeout(function() { // 假裝是ajax
            var ajax = true
            if (ajax) {
                new passwordInput().hide()
            }
        }, 3000);
    }
})

 

插件源碼：

(function () {
    function passwordInput() {
        if (!document.getElementById('passwordInputStyle')) { //添加樣式
            var style = document.createElement('style');
            style.type = 'text/css';
            style.id = 'passwordInputStyle'
            style.innerHTML=`
                #passwordInput{
                    width: 100%;
                    height: 100%;
                    opacity: 0;
                    position: fixed;
                    top: 0;
                    left: 0;
                    z-index: 99;
                    background: rgba(0, 0, 0, 0.6);
                    box-sizing:border-box;
                    transition: 0.5s;
                    -ms-transition: 0.5s;
                    -moz-transition: 0.5s;
                    -webkit-transition: 0.5s;
                    -o-transition: 0.5s;
                    display: flex;
                    display: -ms-flex;
                    display: -moz-flex;
                    display: -webkit-flex;
                    display: -o-flex;
                    flex-direction: row;
                    -ms-flex-direction: row;
                    -moz-flex-direction: row;
                    -webkit-flex-direction: row;
                    -o-flex-direction: row;
                    justify-content: center;
                    -ms-justify-content: center;
                    -moz-justify-content: center;
                    -webkit-justify-content: center;
                    -o-justify-content: center;
                    align-items: center;
                    -ms-align-items: center;
                    -moz-align-items: center;
                    -webkit-align-items: center;
                    -o-align-items: center;
                }
                .passwordInput__none{
                    display: none !important;
                }
                .passwordInputShow{
                    opacity: 1 !important;
                }
                #passwordInput_container{
                    padding: 10px;
                    border-radius: 5px;
                    background: white;
                }
                .passwordInput_input{
                    width: 30px;
                    height: 30px;
                    margin: 0 2.5px;
                    font-size: 35px;
                    font-weight: bold;
                    text-align: center;
                    border: 1px solid black;
                }
                .passwordInput_inputVal{
                    border: 1px solid rgb(0, 152, 255);
                }
                #passwordInput_val{
                    position: absolute;
                    opacity: 0;
                }
            `;
            document.getElementsByTagName('head').item(0).appendChild(style);
        }
    }

    passwordInput.prototype.show = function(option) { // 顯示彈窗
        var _this = this;
        option = option ? option : {}
        option.inputNumber = option.inputNumber ? option.inputNumber : 4
        option.callback = option.callback ? option.callback : function () {};

        // 渲染輸入框數量
        var inputHTML = ''
        for (var i = 0, iLen = option.inputNumber; i < iLen; i++) {
            inputHTML += `<input id="passwordInput_input${i}" class="passwordInput_input" type="password" readonly="readonly">`
        }
        
        var body = document.getElementsByTagName("body")[0];
        body.insertAdjacentHTML("beforeEnd", `
            <div id="passwordInput" class="passwordInput__none">
                <input id="passwordInput_val" maxlength="${option.inputNumber}" type="text" onkeyup="value=value.replace(/[\u4e00-\u9fa5]/ig,'')">
                <div id="passwordInput_container">
                    ${inputHTML}
                </div>
            </div>
        `);

        var passwordInput = document.getElementById('passwordInput')
        passwordInput.classList.remove("passwordInput__none");
        setTimeout(function() {
            passwordInput.classList.add("passwordInputShow");
            document.getElementById('passwordInput_val').focus();
        }, 100);

        document.getElementById('passwordInput_val').oninput = function(event){ //偵聽輸入框
            setTimeout(function() {
                var val = event.target.value;
                var input = document.getElementsByClassName('passwordInput_input')
                for (var i = 0, iLen = input.length; i < iLen; i++) {
                    var element = input[i]
                    element.classList.remove("passwordInput_inputVal")
                    element.value = ''
                }
                for (var i = 0, iLen = val.length; i < iLen; i++) {
                    var element = input[i]
                    element.classList.add("passwordInput_inputVal")
                    element.value = '*'
                }
                if (val.length == option.inputNumber) {
                    option.callback(val)
                }
            }, 100);
        }

        document.getElementById('passwordInput_container').onclick=function () { // 獲取焦點
            document.getElementById('passwordInput_val').focus();
        }

        document.getElementById('passwordInput').addEventListener('click', function (e) { // 點擊遮罩層隱藏彈窗
            if(e.target == this){
                _this.hide()
            }
        }, false);
    }

    passwordInput.prototype.hide = function() { // 隱藏彈窗
        var body = document.getElementsByTagName("body")[0];
        var passwordInput = document.getElementById('passwordInput')
        passwordInput.classList.remove("passwordInputShow");
        setTimeout(function() {
            try {
                body.removeChild(passwordInput);
            } catch (e) {
            }
        }, 600);
    }

    window.passwordInput = passwordInput
})()

 

完整的調用例子截個圖：