; (function ($) {

function LicensePlateselector() {

    // 輸入框元素

    this.input_dom = `<ul class="plate_input_box">

        <li class="territory_key" data-type="territory_key"></li>

        <li style="margin-right:.8rem;"></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li data-end="end"></li>

        <li data-cls="new_energy" data-end="end" class="new_energy">

            <span>新能源</span>

        </li>

    </ul>`

    // 鍵盤元素

    this.keyboard_dom = `...省略`

}

/**

 * 初始化 車牌選擇器

 * @param {string} config.elem  元素

 * @param {string} config.value  默認(rèn)填充車牌

 * @param {number} config.activeIndex   默認(rèn)選中下標(biāo) (從0開(kāi)始)

 * @param {function} inputCallBack  輸入事件回調(diào)

 * @param {function} deleteCallBack  鍵盤刪除事件回調(diào)

 * @param {function} closeKeyCallBack  關(guān)閉鍵盤事件回調(diào)

 */

LicensePlateselector.prototype.init = function (config) {

    config = {

        elem: config.elem,

        value: config.value || "",

        activeIndex: config.activeIndex || false,

        inputCallBack: config.inputCallBack || false,

        deleteCallBack: config.deleteCallBack || false,

        closeKeyCallBack: config.closeKeyCallBack || false,

    }

    this.elemDom = $(config.elem);

    this.elemDom.append(this.input_dom);

    this.elemDom.append(this.keyboard_dom);

    // 監(jiān)聽(tīng)輸入

    this.watchKeyboardEvents(function(val){ 

        // 鍵盤輸入回調(diào)

        if(config.inputCallBack){config.inputCallBack(val);}

    },function(){

        // 鍵盤刪除事件回調(diào)

        if(config.deleteCallBack){config.deleteCallBack();}

    },function(){

        // 關(guān)閉鍵盤事件回調(diào)

        if(config.closeKeyCallBack){config.closeKeyCallBack();}

    })

    // 輸入默認(rèn)車牌

    if (config.value) {

        this.elemDom.find(".plate_input_box li").each(function (index) {

            if (config.value[index]) {

                $(this).text(config.value[index])

            }

        })

    }

    // 選中默認(rèn)下標(biāo)

    if(config.activeIndex){

        this.elemDom.find(".plate_input_box li").eq(config.activeIndex).click();

    }

};

})(jQuery);

/**

* 監(jiān)聽(tīng)鍵盤輸入

* @param {function} inputCallBack  輸入事件回調(diào)

* @param {function} deleteCallBack  鍵盤刪除事件回調(diào)

* @param {function} closeKeyCallBack  關(guān)閉鍵盤事件回調(diào)

*/

LicensePlateselector.prototype.watchKeyboardEvents = function(inputCallBack,deleteCallBack,closeKeyCallBack) {

        let _this = this

        // 輸入框點(diǎn)擊

        _this.elemDom.find(".plate_input_box li").click(function (event) {

            // 顯示邊框

            $(".plate_input_this").removeClass("plate_input_this");

            $(this).addClass("plate_input_this")

            // 彈出鍵盤

            // 關(guān)閉別的鍵盤

            $(".territory_keyboard").css("display","none")

            $(".alphabet_keyboard").css("display","none")

            if ($(this).attr("data-type") && $(this).attr("data-type") == "territory_key") {

                if (_this.elemDom.find(".territory_keyboard").css("display") == "none") {

                    _this.elemDom.find(".alphabet_keyboard").animate({ bottom: "-50rem" }).hide()

                    _this.elemDom.find(".territory_keyboard").show().animate({ bottom: 0 })

                }

            } else {

                if (_this.elemDom.find(".alphabet_keyboard").css("display") == "none") {

                    _this.elemDom.find(".territory_keyboard").animate({ bottom: "-50rem" }).hide()

                    _this.elemDom.find(".alphabet_keyboard").show().animate({ bottom: 0 })

                }

            }

            // 點(diǎn)擊新能源

            if ($(this).attr("data-cls") == "new_energy") {

                $(this).empty().removeClass("new_energy").attr("data-cls", "")

            }

            event.stopPropagation();    //  阻止事件冒泡

        })

        // 地域鍵盤輸入事件

        ......

    }

<div id="demo"></div>

<script>

let licensePlateselector = new LicensePlateselector();

// 初始化

licensePlateselector.init({

    elem: "#demo",  // 根元素id

    value: "湘A",   // 默認(rèn)填充車牌

    activeIndex: 2,    // 默認(rèn)選中下標(biāo) (從0開(kāi)始，不傳時(shí)，默認(rèn)不選中)

    inputCallBack:function(val){ // 輸入事件回調(diào)

        console.log(val);

        let plate_number = licensePlateselector.getValue(); // 獲取當(dāng)前車牌

        console.log(plate_number);

    },

    deleteCallBack:function(){ // 鍵盤刪除事件回調(diào)

        let plate_number = licensePlateselector.getValue(); // 獲取當(dāng)前車牌

        console.log(plate_number);

    },

    closeKeyCallBack:function(){ // 關(guān)閉鍵盤事件回調(diào)

        console.log("鍵盤關(guān)閉");

    },

})

</script>