本文实例为大家分享了微信小程序实现车牌键盘的具体代码,供大家参考,具体内容如下
一、效果图
二、代码
plateNumKeyboard.wxml
请输入车牌号: {{inputPlates.index0}} {{inputPlates.index1}} {{inputPlates.index2}} {{inputPlates.index3}} {{inputPlates.index4}} {{inputPlates.index5}} {{inputPlates.index6}} + {{inputPlates.index7}} 关闭 {{itemName}} {{itemName}} {{itemName}} {{itemName}} 删除 {{itemName}} {{itemName}} {{itemName}} {{itemName}} {{itemName}} {{itemName}} {{itemName}} 删除
plateNumKeyboard.js
Page({ data: { isKeyboard: 1, isNumberKB: !1, tapNum: !1, disableKey: "1234567890港澳学", keyboardNumber: "1234567890ABCDEFGHJKLMNPQRSTUVWXYZ港澳学", keyboard1: "京沪粤津冀晋蒙辽吉黑苏浙皖闽赣鲁豫鄂湘桂琼渝川贵云藏陕甘青宁新", inputPlates: { index0: "", index1: "", index2: "", index3: "", index4: "", index5: "", index6: "", index7: "" }, inputOnFocusIndex: "0", flag: true }, onLoad: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { this.getHistoryList(); }, getHistoryList: function () { let that = this; let data = { unionid: app.globalData.unionid, } wxRequest({ url: app.globalData.url + '/car/history/getByOpenId', method: 'get', header: { "Authorization": app.globalData.token, }, data: data, }) .then((res) => { let historyList = res.data.data; that.setData({ historyList, }) }) .catch((err) => { console.log(err); }); }, showLast: function () { this.setData({ flag: false, }) }, setText: function (e) { let text = e.currentTarget.dataset.text; if (text.length == 8) { this.setData({ flag: false, 'inputPlates.index7': text[7], }) } else { this.setData({ flag: true, 'inputPlates.index7': "", }) } this.setData({ 'inputPlates.index0': text[0], 'inputPlates.index1': text[1], 'inputPlates.index2': text[2], 'inputPlates.index3': text[3], 'inputPlates.index4': text[4], 'inputPlates.index5': text[5], 'inputPlates.index6': text[6], }) }, inputClick: function (t) { var that = this; that.setData({ inputOnFocusIndex: t.target.dataset.id, isKeyboard: !0 }) "0" == this.data.inputOnFocusIndex ? that.setData({ tapNum: !1, isNumberKB: !1 }) : "1" == this.data.inputOnFocusIndex ? that.setData({ tapNum: !1, isNumberKB: !0 }) : that.setData({ tapNum: !0, isNumberKB: !0 }); }, //键盘点击事件 tapKeyboard: function (t) { t.target.dataset.index; var a = t.target.dataset.val; switch (this.data.inputOnFocusIndex) { case "0": this.setData({ "inputPlates.index0": a, inputOnFocusIndex: "1" }); break; case "1": this.setData({ "inputPlates.index1": a, inputOnFocusIndex: "2" }); break; case "2": this.setData({ "inputPlates.index2": a, inputOnFocusIndex: "3" }); break; case "3": this.setData({ "inputPlates.index3": a, inputOnFocusIndex: "4" }); break; case "4": this.setData({ "inputPlates.index4": a, inputOnFocusIndex: "5" }); break; case "5": this.setData({ "inputPlates.index5": a, inputOnFocusIndex: "6" }); break; case "6": this.setData({ "inputPlates.index6": a, inputOnFocusIndex: "7" }); break; case "7": if (!this.data.flag) { this.setData({ "inputPlates.index7": a, inputOnFocusIndex: "7" }); } } if (this.data.inputOnFocusIndex == "0") { this.setData({ isKeyboard: 1, isNumberKB: !1, tapNum: !1, }) } else { this.setData({ isKeyboard: 1, isNumberKB: 1, tapNum: 1, }) } }, closeKeyBoard: function () { this.setData({ isKeyboard: false, }) }, //键盘关闭按钮点击事件 tapSpecBtn: function () { if (this.data.inputOnFocusIndex == "0") { this.setData({ isKeyboard: 1, isNumberKB: !1, tapNum: !1, }) } else { this.setData({ isKeyboard: 1, isNumberKB: 1, tapNum: 1, }) } switch (parseInt(this.data.inputOnFocusIndex)) { case 0: this.setData({ "inputPlates.index0": "", inputOnFocusIndex: "0", }); break; case 1: if (this.data.inputPlates.index1) { this.setData({ "inputPlates.index1": "", inputOnFocusIndex: "1" }); } else { this.setData({ "inputPlates.index0": "", "inputPlates.index1": "", inputOnFocusIndex: "0", }); } break; case 2: if (this.data.inputPlates.index2) { this.setData({ "inputPlates.index2": "", inputOnFocusIndex: "2" }); } else { this.setData({ "inputPlates.index1": "", "inputPlates.index2": "", inputOnFocusIndex: "1" }); } break; case 3: if (this.data.inputPlates.index3) { this.setData({ "inputPlates.index3": "", inputOnFocusIndex: "3" }); } else { this.setData({ "inputPlates.index2": "", "inputPlates.index3": "", inputOnFocusIndex: "2" }); } break; case 4: if (this.data.inputPlates.index4) { this.setData({ "inputPlates.index4": "", inputOnFocusIndex: "4" }); } else { this.setData({ "inputPlates.index3": "", "inputPlates.index4": "", inputOnFocusIndex: "3" }); } break; case 5: if (this.data.inputPlates.index5) { this.setData({ "inputPlates.index5": "", inputOnFocusIndex: "5" }); } else { this.setData({ "inputPlates.index4": "", "inputPlates.index5": "", inputOnFocusIndex: "4" }); } break; case 6: if (this.data.inputPlates.index6) { this.setData({ "inputPlates.index6": "", inputOnFocusIndex: "6" }); } else { this.setData({ "inputPlates.index5": "", "inputPlates.index6": "", inputOnFocusIndex: "5" }); } break; case 7: if (this.data.inputPlates.index7) { this.setData({ "inputPlates.index7": "", inputOnFocusIndex: "7" }); } else { this.setData({ "inputPlates.index6": "", "inputPlates.index7": "", inputOnFocusIndex: "6", flag: true, }); } } }, })
plateNumKeyboard.wxss
.box { width: 690rpx; margin: 0 auto; margin-top: 24rpx; height: 260rpx; background-color: rgb(237, 245, 255); border: 2rpx solid rgb(230, 241, 255); border-radius: 4rpx; } .box-top { width: 650rpx; margin: 0 auto; height: 100rpx; line-height: 100rpx; text-align: center; color: rgb(70, 145, 255); font-weight: bold; border-bottom: 4rpx solid rgb(218, 235, 255); font-size: 28rpx; } .plate-input-body { /*border: 1px solid red;*/ height: 100rpx; margin: 30rpx auto; width: 650rpx; } .plate-input-content { display: flex; flex-direction: row; height: 100rpx; } .plate-nums-foc { flex: 1; border: 2rpx solid rgb(119, 179, 255); margin-right: 10rpx; display: flex; align-items: center; justify-content: center; text-align: center; height: 100%; box-sizing: border-box; border-radius: 4rpx; } .plate-nums-first { flex: 1; border: 2rpx solid #ccc; margin-right: 10rpx; display: flex; align-items: center; justify-content: center; text-align: center; height: 100%; box-sizing: border-box; border-radius: 4rpx; } .point-box { width: 40rpx; height: 100%; display: flex; align-items: center; justify-content: center; } .point-img { width: 16rpx; height: 16rpx; } .bg1 { background-color: rgb(177, 212, 255); justify-content: center; color: rgb(55, 145, 255); border: 2rpx dashed rgb(119, 179, 255); } .plate-num-text { flex: 1; line-height: 100rpx; height: 100%; box-sizing: border-box; border-radius: 4rpx; font-size: 40rpx; font-weight: normal; } .last{ margin-right: 0; } .text { margin: 20rpx auto; width: 254rpx; color: rgb(255, 99, 85); font-size: 24rpx; } .kb_top { align-content: relative; width: 100%; height: 74rpx; background: #fff; border-top: solid #ebebeb 2rpx; border-bottom: 15rpx solid #d7d8dc; } .keyboard { z-index: 9999; position: fixed; bottom: 0; left: 0; width: 100%; height: auto; background: #d7d8dc; display: flex; flex-wrap: wrap; border-bottom: 15rpx solid #d7d8dc; } .td { font-family: "微软雅黑"; flex-grow: 1; text-align: center; font-size: 34rpx; height: 86rpx; line-height: 80rpx; background: #fff; margin: 10rpx 5rpx; color: #333; border-radius: 10rpx 10rpx 10rpx 10rpx; box-shadow: 0rpx 2rpx 0rpx #a9a9a9; } .td_nor { flex: 1 1 6%; } .td_num { flex: 1 1 8%; } .td_spec { flex: 1 1 12%; } .board_bg { box-shadow: 0 0 0 #e5e5e5; background: #e5e5e5; } .del-first { position: absolute; bottom: 10rpx; right: 10rpx; width: 137rpx; height: 86rpx; background-color: #fff; box-shadow: 0rpx 2rpx 0rpx #a9a9a9; display: flex; align-items: center; justify-content: center; border-radius: 10rpx; color: rgb(240, 110, 79); } .del-hover { position: absolute; bottom: 10rpx; right: 10rpx; width: 137rpx; height: 86rpx; background-color: #e5e5e5; display: flex; align-items: center; justify-content: center; border-radius: 10rpx; box-shadow: 0 0 0 #e5e5e5; } .del-img { display: block; width: 46rpx; height: 38rpx; }
plateNumKeyboard.json
{ "navigationBarTitleText": "车牌键盘" }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。