H5车牌输入选择器

前言

公司的业务背景是个大型园区，不可避免的要接触太多与车辆收费相关的业务，于是就有了这个车牌输入选择器。对于车牌，用户手动输入的是不可信的，而且车牌第一位的地区简称打字输入实在是太麻烦，所以界定用户的输入内容，才能让双方都更加方便。

预览: pxsgdsb.github.io/licensePlat... (请使用移动端打开)

github：github.com/pxsgdsb/lic...

gitee：gitee.com/PxStrong/li...

实现

因为车牌内容是固定的，所以直接写死在元素内。但是，为了提高组件的复用性，需要做一些简单的封装。

js 复制代码

; (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  默认填充车牌
 * @param {number} config.activeIndex   默认选中下标 (从0开始)
 * @param {function} inputCallBack  输入事件回调
 * @param {function} deleteCallBack  键盘删除事件回调
 * @param {function} closeKeyCallBack  关闭键盘事件回调
 */
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);
    // 监听输入
    this.watchKeyboardEvents(function(val){ 
        // 键盘输入回调
        if(config.inputCallBack){config.inputCallBack(val);}
    },function(){
        // 键盘删除事件回调
        if(config.deleteCallBack){config.deleteCallBack();}
    },function(){
        // 关闭键盘事件回调
        if(config.closeKeyCallBack){config.closeKeyCallBack();}
    })
    // 输入默认车牌
    if (config.value) {
        this.elemDom.find(".plate_input_box li").each(function (index) {
            if (config.value[index]) {
                $(this).text(config.value[index])
            }
        })
    }
    // 选中默认下标
    if(config.activeIndex){
        this.elemDom.find(".plate_input_box li").eq(config.activeIndex).click();
    }
};
})(jQuery);

watchKeyboardEvents()函数用于在元素创建完成后创建事件监听

js 复制代码

/**
* 监听键盘输入
* @param {function} inputCallBack  输入事件回调
* @param {function} deleteCallBack  键盘删除事件回调
* @param {function} closeKeyCallBack  关闭键盘事件回调
*/
LicensePlateSelector.prototype.watchKeyboardEvents = function(inputCallBack,deleteCallBack,closeKeyCallBack) {
        let _this = this
        // 输入框点击
        _this.elemDom.find(".plate_input_box li").click(function (event) {
            // 显示边框
            $(".plate_input_this").removeClass("plate_input_this");
            $(this).addClass("plate_input_this")
            // 弹出键盘
            // 关闭别的键盘
            $(".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 })
                }
            }
            // 点击新能源
            if ($(this).attr("data-cls") == "new_energy") {
                $(this).empty().removeClass("new_energy").attr("data-cls", "")
            }
            event.stopPropagation();    //  阻止事件冒泡
        })

        // 地域键盘输入事件
        ......
    }

使用时html只需要创建一个根元素，js输入配置项，自动渲染组件。

html 复制代码

<div id="demo"></div>
<script>
let licensePlateSelector = new LicensePlateSelector();
// 初始化
licensePlateSelector.init({
    elem: "#demo",  // 根元素id
    value: "湘A",   // 默认填充车牌
    activeIndex: 2,    // 默认选中下标 (从0开始，不传时，默认不选中)
    inputCallBack:function(val){ // 输入事件回调
        console.log(val);
        let plate_number = licensePlateSelector.getValue(); // 获取当前车牌
        console.log(plate_number);
    },
    deleteCallBack:function(){ // 键盘删除事件回调
        let plate_number = licensePlateSelector.getValue(); // 获取当前车牌
        console.log(plate_number);
    },
    closeKeyCallBack:function(){ // 关闭键盘事件回调
        console.log("键盘关闭");
    },
})
</script>

参数

参数	类型	必填	说明	示例值
elem	String	是	指定元素选择器	"#demo"
value	String	否	默认填充车牌	"湘A"
activeIndex	number	否	当前输入框下标，从0开始，不传时，默认不选中	2
inputCallBack	function	否	输入事件回调函数，返回参数：当前输入的值
deleteCallBack	function	否	键盘删除事件回调函数
closeKeyCallBack	function	否	关闭键盘事件回调函数

方法

getValue 获取当前车牌

js 复制代码

let plate_number = licensePlateSelector.getValue();

setValue 设置车牌

js 复制代码

licensePlateSelector.setValue("粤A1E9Q3");

clearValue 清空车牌

js 复制代码

licensePlateSelector.clearValue();

END

如果觉得对你还有些用，顺手点一下star吧。