組件辑奈，依賴jquery

css

.code-input {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.code-input .code-container{
    display: flex;
    flex-wrap: nowrap;
}
.code-input .code-container .tb-code{
    box-sizing: border-box;
    border: solid 0.05rem #E7E8EB;
    border-right: 0;
    font-size: 0.9rem;
    text-align: center;
    background-color: transparent;
    color: #333333;
}
.code-input .code-container .tb-code:first-child{
    border-radius: 0.15rem 0 0 0.15rem;
}
.code-input .code-container .tb-code:last-child{
    border-radius: 0 0.15rem 0.15rem 0;
    border-right: solid 1px #E7E8EB;
}

js

;(function () {
    'use strict';
    function setAttributes(target, option) {
        Object.keys(option).forEach(function (key) {
            target.setAttribute(key, option[key])
        })
        return target
    }
    function createElement(tagName, option) {
        var dom = document.createElement(tagName)
        setAttributes(dom, option)
        return dom
    }
    function focusHandler(e) {
        this.input.focus();
    }
    function setVal(val) {
        var value = val.slice(0,this.codeLength) || ''
        for(var i=0;i<this.codeLength;i++){
            this.tabs[i].value = value[i] || '';
        }
        this.input.value = value
        this.currentVal = value
    }
    function inputHandler(e) {
        setVal.call(this, e.currentTarget.value)
    }
    function keyupHandler(e) {
        if(e.key === 'Enter' && this.currentVal.length===this.codeLength) {
            this.input.blur();
            if(Object.prototype.toString.call(this.option.oncomplete)==="[object Function]") {
                this.option.oncomplete.call(this, this.currentVal)
            }
        }else {
            return true
        }
    }
    function CodeInput(el, option){
        var target = null;
        if(el){
            target = el && el[0] ? el[0] : el
            if(target.nodeType !== 1){
                target = document.querySelector(target)
            }
        }
        if(!target){
            console.error('codeinput初始化失敗拴魄，缺少初始化dom節(jié)點(diǎn)')
            return
        }
        this.currentVal = ''
        this.el = target
        this.option = option
        this.codeLength = option.codeLength || 6
        this.flag = true
        this.init()
    }
    CodeInput.prototype.init = function () {
        // 創(chuàng)建dom結(jié)構(gòu)
        this.el.setAttribute('class',this.el.getAttribute('class') + ' code-input')
        this.input = createElement('input',
            {
                    id:'codeInput',
                    name: this.option.name || 'codeInput',
                    style: 'width: 100%;opacity: 0;height: 100%;position: absolute;top: 0;'
                }
            )
        this.tabsContainer = createElement('div',
            {
                id:'code-container',
                class: 'code-container'
            }
        )
        this.tabs = []
        for (var i=0; i<this.codeLength;i++){
            this.tabs[i] = createElement('input',
                {
                    id:'tb'+i,
                    disabled: 'disabled',
                    class: 'tb-code',
                    style: 'width:'+this.option.width+';height:'+this.option.height
                }
            )
            this.tabsContainer.append(this.tabs[i])
        }
        this.el.append(this.tabsContainer)
        this.el.append(this.input)
        this.addEventListener()
    }
    CodeInput.prototype.addEventListener = function () {
        var _self = this
        this.input.onkeyup = function (e) {
            keyupHandler.call(_self,e)
        }
        if(this.option.hasChinese) {
            $(this.input).on('compositionstart', function(){
                _self.flag = false;
            })
            $(this.input).on('compositionend', function(e) {
                _self.flag = true;
                inputHandler.call(_self, e)
            })
        }
        $(this.input).on('input', function (e) {
            if(_self.option.hasChinese){
                if(_self.flag){
                    inputHandler.call(_self, e)
                }
            }else {
                inputHandler.call(_self, e)
            }
        })
        this.tabsContainer.onclick = function (e) {
            focusHandler.call(_self,e)
        }
    }
    CodeInput.prototype.val = function (setValue) {
        if(setValue===undefined){
            return this.currentVal
        }
        setVal.call(this, setValue)
    }
    if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {

        // AMD. Register as an anonymous module.
        define(function() {
            return CodeInput;
        });
    } else if (typeof module !== 'undefined' && module.exports) {
        module.exports = FastClick.attach;
        module.exports.FastClick = FastClick;
    } else {
        window.CodeInput = CodeInput;
    }
}())

使用方式

// 驗(yàn)證碼位數(shù)
var repayCodeLength = 6,
var imageCode = $('#imageCode')
function oncomplete() {
    imageCode.focus()
}
repayCodeInstance = new CodeInput(repayCode,{
    width: '2.3775rem;',
    height: '2.2rem',
    name: 'repayCode',
    codeLength: repayCodeLength,
    hasChinese: false,
    oncomplete: oncomplete
})