H5车牌输入软键盘
当前位置：知识管理交流
→『 技术文档交流 』
前言公司的业务背景是个大型园区，不可避免的要接触太多与车辆收费相关的业务，于是就有了这个车牌输入软键盘。对于车牌，用户手动输入的是不可信的，而且车牌第一位的地区简称打字输入实在是太麻烦，所以界定用户的输入内容，才能让双方都更加方便。
实现因为车牌内容是固定的，所以直接写死在元素内。但是，为了提高组件的复用性，需要做一些简单的封装。 ; (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);
/** * 监听键盘输入 * @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> 参数
方法
let plate_number = licensePlateselector.getValue();
licensePlateselector.setValue("粤A1E9Q3");
licensePlateselector.clearValue(); END该文章在 2023/10/25 16:51:51 编辑过 |
关键字查询
相关文章
正在查询... 
|
400 186 1886
