H5车牌输入软键盘

前言

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

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

github：github.com/pxsgdsb/lic…

gitee：gitee.com/PxStrong/li…

实现

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

; (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()函数用于在元素创建完成后创建事件监听

/**

* 监听键盘输入

* @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输入配置项，自动渲染组件。

<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>

参数

方法

getValue 获取当前车牌

let plate_number = licensePlateSelector.getValue();

setValue 设置车牌

licensePlateSelector.setValue("粤A1E9Q3");

clearValue 清空车牌

licensePlateSelector.clearValue();

END

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