模拟输入密码光标移动

模拟输入密码

1、html

<div class="password">
    <input type="text" value="" maxlength="6">
    <div class="showPart">
        <i class="active"><b></b></i>
        <i><b></b></i>
        <i><b></b></i>
        <i><b></b></i>
        <i><b></b></i>
        <i><b></b></i>
    </div>
</div>

2、js

$(function () {
    var my = {
        init: function () {
            this.show();
            this.onFun();
        },
        show: function () {
            var txts = document.getElementsByTagName('input');
            for (var i = 0; i < txts.length; i++) {
                var t = txts[i];
                t.index = i;
                t.setAttribute('readonly', true);
                t.onkeyup = function (e) {
                    if (e.keyCode !== 8) {
                        var next = this.index + 1;
                        if (next > txts.length - 1) return;
                        txts[next].removeAttribute('readonly');
                        $(txts[next]).focus().addClass('active').siblings('input').removeClass('active');
                    } else {
                        var prev = this.index - 1;
                        if (prev < 0) return;
                        $(txts[prev]).focus().addClass('active').siblings('input').removeClass('active');
                    }
                }
            }
            txts[0].removeAttribute('readonly');
            $('input').focus()
        },
        onFun: function () {
            var _t = this,
                _b = $('body');
            _b
                .on({
                    'input': function () {
                        let _val = $('input').val(),
                            _l = _val.length,
                            _e = $('.showPart i'),
                            _i = _e.eq(_l)
                        $.each(_e,function (i) {
                            let str = _val.split('')[i];
                            !!str ? _e.eq(i).text(str.replace(str,'*')) : _e.eq(i).html('<b></b>')
                        })
                        _i.addClass('active').siblings('i').removeClass('active');
                        if(_l === 6) {
                            _e.eq(5).html('*' + '<b class="last"></b>')
                            /** 请求接口  */
                        }
                    }
                }, 'input')
        },
    my.init()
});

3、css

.password {
    padding: .43rem .86rem 0;
    position: relative;

    .showPart {
        display: flex;
        justify-content: space-between;
    }

    i {
        width: .7rem;
        height: .7rem;
        line-height: .99rem;
        border-radius: .07rem;
        border: 1px solid #E5E5E5;
        text-align: center;
        color: #333;
        font-size: .58rem;

        position: relative;

        &.active {
            border: 1px solid #05BECA;
            box-shadow: 0px 0px 3px 4px rgba(70, 182, 198, 0.18);

            b {
                margin: 0 auto;
                margin-top: .13rem;
                display: block;
                animation: move .8s steps(1, start) infinite;
            }
        }

        b {
            width: 2px;
            height: .43rem;
            background: #05BECA;
            display: inline-block;
            display: none;

            &.last {
                position: absolute;
                right: .2rem;
                top: 0;
            }
        }
    }

    input {
        position: absolute;
        width: 5.8rem;
        height: .7rem;
        opacity: 0;
    }
}
@-webkit-keyframes move {
    0%,
    100% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}