微信小程序之车牌号码框及输入法的设计
一、车牌输入页面设计如下图所示：
二、实现代码如下：
-----------------JS代码-----------------------
Page({
data: {
isKeyboard: !1,
isNumberKB: !1,
tapNum: !1,
disableKey: "1234567890港澳学",
keyboardNumber: "1234567890ABCDEFGHJKLMNPQRSTUVWXYZ港澳学",
keyboard1: "京沪粤津冀晋蒙辽吉黑苏浙皖闽赣鲁豫鄂湘桂琼渝川贵云藏陕甘青宁新",
inputPlates: {
index0: "陕",
index1: "A",
index2: "",
index3: "",
index4: "",
index5: "",
index6: "",
index7: ""
},
inputOnFocusIndex: "",
flag:true
},
onLoad: function () {
},
//切换车牌
changeplate:function(){
var that = this;
that.setData({
flag:false,
inputPlates: {
index0: "陕",
index1: "A",
index2: "",
index3: "",
index4: "",
index5: "",
index6: "",
index7: ""
},
})
},
//切换车牌
changeplate1: function () {
var that = this;
that.setData({
flag: true,
inputPlates: {
index0: "陕",
index1: "A",
index2: "",
index3: "",
index4: "",
index5: "",
index6: "",
index7: ""
},
})
},
inputClick:function(t){
var that = this;
console.log('输入框:', t)
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;
console.log('键盘:',a)
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":
this.setData({
"inputPlates.index7": a,
inputOnFocusIndex: "7"
});
}
var n = this.data.inputPlates.index0 + this.data.inputPlates.index1 + this.data.inputPlates.index2 + this.data.inputPlates.index3 + this.data.inputPlates.index4 + this.data.inputPlates.index5 + this.data.inputPlates.index6 + this.data.inputPlates.index7
console.log('车牌号:',n)
this.checkedSubmitButtonEnabled();
},
//键盘关闭按钮点击事件
tapSpecBtn: function (t) {
var a = this, e = t.target.dataset.index;
if (0 == e) {
switch (parseInt(this.data.inputOnFocusIndex)) {
case 0:
this.setData({
"inputPlates.index0": "",
inputOnFocusIndex: "0"
});
break;
case 1:
this.setData({
"inputPlates.index1": "",
inputOnFocusIndex: "0"
});
break;
case 2:
this.setData({
"inputPlates.index2": "",
inputOnFocusIndex: "1"
});
break;
case 3:
this.setData({
"inputPlates.index3": "",
inputOnFocusIndex: "2"
});
break;
case 4:
this.setData({
"inputPlates.index4": "",
inputOnFocusIndex: "3"
});
break;
case 5:
this.setData({
"inputPlates.index5": "",
inputOnFocusIndex: "4"
});
break;
case 6:
this.setData({
"inputPlates.index6": "",
inputOnFocusIndex: "5"
});
break;
case 7:
this.setData({
"inputPlates.index7": "",
inputOnFocusIndex: "6"
});
}
this.checkedSubmitButtonEnabled();
} else 1 == e && a.setData({
isKeyboard: !1,
isNumberKB: !1,
inputOnFocusIndex: ""
});
},
//键盘切换
checkedKeyboard: function () {
var t = this;
"0" == this.data.inputOnFocusIndex ? t.setData({
tapNum: !1,
isNumberKB: !1
}) : "1" == this.data.inputOnFocusIndex ? t.setData({
tapNum: !1,
isNumberKB: !0
}) : this.data.inputOnFocusIndex.length > 0 && t.setData({
tapNum: !0,
isNumberKB: !0
});
},
checkedSubmitButtonEnabled: function () {
this.checkedKeyboard();
var t = !0;
for (var a in this.data.inputPlates) if ("index7" != a && this.data.inputPlates[a].length < 1) {
t = !1;
break;
}
},
})
-----------------WXML代码-----------------------
尚品国际北广场
点击方框输入车牌号
{{inputPlates.index0}}
{{inputPlates.index1}}
{{inputPlates.index2}}
{{inputPlates.index3}}
{{inputPlates.index4}}
{{inputPlates.index5}}
{{inputPlates.index6}}
{{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}}
-----------------CSS代码-----------------------
.pages_header{
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.pages_header_top{
width:33.3%;
height: 60rpx;
border-left: 5px solid green;
border-right: 5px solid green;
}
.pages_header_btm{
width:70%;
background: green;
height: 120rpx;
line-height: 120rpx;
text-align: center;
color: white;
border-radius: 10rpx;
font-weight: normal;
font-size: 16pt;
}
.tips{
text-align: center;
margin: 60rpx 0;
font-size: 12pt;
color: #888888;
}
.plate-input-flag{
margin: 30rpx 10rpx 30rpx 0;
color: green;
float: right;
}
.plate-input-body {
/*border: 1px solid red;*/
height: 100rpx;
margin: 0 10rpx;
}
.plate-input-content {
display: flex;
flex-direction: row;
height: 100rpx;
}
.plate-nums-foc{
flex: 1;
border: 2rpx solid #00bf70;
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;
}
.plate-num-text {
flex: 1;
line-height: 100rpx;
height: 100%;
box-sizing: border-box;
border-radius: 4rpx;
font-size: 40rpx;
font-weight: normal;
}
.new-plate-input-content{
display: flex;
flex-direction: row;
height: 100rpx;
}
.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;
}
.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;
}