Imitate Alipay password input box

This is the first article in the series of plug-ins, usually sneak in to write a work of some of their components, now share

My simple assembly without dependent (no need to reference other libraries such as JQ) written in native JS

Component style is simple, did not intend to write more beautiful achieve focus function

====== dividing line ============

Imitate Alipay password input box is just mimics, not all styles imitate; PC, mobile terminal can use

 

Calling code:

new new passwordInput () Show ({. 
    InputNumber: . 6, // password how many bits 
    the callback: function (Data) { 
        the console.log ( 'password:' + Data) 
        the setTimeout ( function () { // pretend Ajax 
            var Ajax = to true 
            IF (Ajax) {
                 new new passwordInput () hide (). 
            } 
        }, 3000 ); 
    } 
})

 

Plug Source:

(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
})()