手写小程序车牌号输入键盘

效果图如下：

小程序 .wxml 页面的代码

1. 输入框部分的代码：

<!--通过sta来给输入框添加选中样式-->
<view style="display:flex; flex-direction: row;  justify-content: start; align-content: center; border-bottom: 0.05em solid #e5e5e5; 
margin-left:2.5vw; margin-right:2.5vw; margin-top:2.5vh" wx:if="{{type != 'update'}}">
	<text style="display:flex; width: 25%; height: 3.5vh; padding-top:1vh; padding-bottom:1vh;">车牌号</text>
	<text style="font-size: 1.5em; color: #e5e5e5;	">|</text>
	<input class="inpz {{sta == 1?'inpz2':''}}" id="1" bindtap="inpzm" disabled value="{{text1}}"/>
	<input class="inpz {{sta == 2?'inpz2':''}}" id="2" bindtap="inpzm" disabled value="{{text2}}"/>
	<input class="inpz {{sta == 3?'inpz2':''}}" id="3" bindtap="inpzm" disabled value="{{text3}}"/>
	<input class="inpz {{sta == 4?'inpz2':''}}" id="4" bindtap="inpzm" disabled value="{{text4}}"/>
	<input class="inpz {{sta == 5?'inpz2':''}}" id="5" bindtap="inpzm" disabled value="{{text5}}"/>
	<input class="inpz {{sta == 6?'inpz2':''}}" id="6" bindtap="inpzm" disabled value="{{text6}}"/>
	<input class="inpz {{sta == 7?'inpz2':''}}" id="7" bindtap="inpzm" disabled value="{{text7}}"/>
	<input hidden="{{xin}}" class="inpz {{sta == 8?'inpz2':''}}" id="8" bindtap="inpzm" disabled value="{{text8}}" placeholder="新"/>
</view>

2. 键盘部分的代码：

<!--当sta=1时，显示文字键盘，sta通过id获取-->
<view class="bottom2 {{sta == 1 ? 'bot' : ''}}">
	<view class="flexy"><button class="item" wx:for="{{licensePlate1}}" wx:key="index" bindtap="zim" data-text="{{item.name}}">{{item.name}}</button></view>
	<view class="flexy"><button class="item" wx:for="{{licensePlate2}}" wx:key="index" bindtap="zim" data-text="{{item.name}}">{{item.name}}</button></view>
	<view class="flexy"><button class="item" wx:for="{{licensePlate3}}" wx:key="index" bindtap="zim" data-text="{{item.name}}">{{item.name}}</button></view>
	<view class="flexy">
		<button class="item" wx:for="{{licensePlate4}}" wx:key="index" bindtap="zim" data-text="{{item.name}}">{{item.name}}</button>
		<button class="item2" bindtap="del"><image src="/images/icon/select.png" mode="widthFix" style="width:46rpx"/></button>
	</view>
</view>
<!--反之当sta=2，3，4，5，6，7，8时显示数字字母键盘-->
<view class="bottom2 {{sta == 2||sta == 3||sta == 4||sta == 5||sta == 6||sta == 7||sta == 8 ? 'bot' : ''}} bottom3" >
	<view class="flexy"><button class="item" wx:for="{{numx}}" wx:key="index" bindtap="zim2" data-text="{{item.name}}">{{item.name}}</button></view>
	<view class="flexy"><button class="item" wx:for="{{zm1}}" wx:key="index" bindtap="zim2" data-text="{{item.name}}">{{item.name}}</button></view>
	<view class="flexy"><button class="item" wx:for="{{zm2}}" wx:key="index" bindtap="zim2" data-text="{{item.name}}">{{item.name}}</button></view>
	<view class="flexy">
		<button class="item" wx:for="{{zm3}}" wx:key="index" bindtap="zim2" data-text="{{item.name}}">{{item.name}}</button>
		<button class="item3" hidden="{{!xin}}" bindtap="xin"><view style="min-width:74rpx">{{'新能源'}}</view></button>
		<button class="item3" hidden="{{xin}}" bindtap="xin"><view style="min-width:74rpx">{{'非新'}}</view></button>
		<button class="item2" bindtap="del"><image src="/images/icon/select.png" mode="widthFix" style="width:46rpx;transform: rotate(90deg);"/></button>
	</view>
</view>

3. css 样式代码：

.bottom2{
    position: fixed;
    left: 0;
    right: 0;
    bottom: -1000rpx;
    height: auto;
    background: #cbcbcb;
    padding: 25rpx 15rpx 10rpx 15rpx;
    transition: all .3s;
}
.flexy{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.bottom2 .item{
    padding: 18rpx 16rpx;
    color: #333;
    font-size: 34rpx;
    border-radius: 10rpx;
    width: fit-content;
    margin: 0 4rpx 15rpx;
}
.bottom2 .item2{
    padding: 18rpx 46rpx;
    margin: 0 4rpx 15rpx;
    width: fit-content;
    border-radius: 10rpx;
}
.bottom2 .item3{
    padding: 18rpx 46rpx 18rpx 34rpx;
    margin: 0 4rpx 15rpx;
    width: fit-content;
    border-radius: 10rpx;
    display: flex;
    align-items: center;
    font-size: 24rpx;
}
.inpz{
    border: 1rpx #cbcbcb solid;
    height: 72rpx;
    width: 62rpx;
    margin-left: 10rpx;
    margin-bottom: 18rpx;
    border-radius: 10rpx;
    color: #333;
    text-align: center;
}
.inpz2{
    border: 1rpx #233244 solid;
}
.bot{
    bottom: 0;
}
.bottom3 .item{
    padding: 18rpx 22rpx;
}

小程序 .js 代码：

licensePlate:[{name:'京'},{name:'津'},{name:'沪'},{name:'渝'},{name:'苏'},{name:'浙'},{name:'豫'},{name:'粤'},{name:'川'},{name:'陕'},{name:'冀'},{name:'辽'},{name:'吉'},{name:'皖'},{name:'闽'},{name:'鄂'},{name:'湘'},{name:'鲁'},{name:'晋'},{name:'黑'},{name:'赣'},{name:'贵'},{name:'甘'},{name:'桂'},{name:'琼'},{name:'云'},{name:'青'},{name:'蒙'},{name:'藏'},{name:'宁'},{name:'新'},{name:'使'},{name:'领'},{name:'警'},{name:'港'},{name:'澳'},{name:'台'},{name:'学'}],
licensePlate1:[{name:'京'},{name:'津'},{name:'沪'},{name:'渝'},{name:'苏'},{name:'浙'},{name:'豫'},{name:'粤'},{name:'川'},{name:'陕'}],
licensePlate2:[{name:'冀'},{name:'辽'},{name:'吉'},{name:'皖'},{name:'闽'},{name:'鄂'},{name:'湘'},{name:'鲁'},{name:'晋'},{name:'黑'}],
licensePlate3:[{name:'赣'},{name:'贵'},{name:'甘'},{name:'桂'},{name:'琼'},{name:'云'},{name:'青'},{name:'蒙'},{name:'藏'},{name:'宁'}],
licensePlate4:[{name:'新'},{name:'使'},{name:'领'},{name:'警'},{name:'港'},{name:'澳'},{name:'台'},{name:'学'}],
sta:3,
text1:"辽",
text2:"B",
numx:[{name:'0'},{name:'1'},{name:'2'},{name:'3'},{name:'4'},{name:'5'},{name:'6'},{name:'7'},{name:'8'},{name:'9'}],
zm1:[{name:'A'},{name:'B'},{name:'C'},{name:'D'},{name:'E'},{name:'F'},{name:'G'},{name:'H'},{name:'I'},{name:'J'}],
zm2:[{name:'K'},{name:'L'},{name:'M'},{name:'N'},{name:'O'},{name:'P'},{name:'Q'},{name:'R'},{name:'S'},{name:'T'}],
zm3:[{name:'U'},{name:'V'},{name:'W'},{name:'X'},{name:'Y'},{name:'Z'}],
text3:'',
text4:'',
text5:'',
text6:'',
text7:'',
text8:'',
xin:true,
//获取点击的输入框的id,如果id=1,就显示文字键盘，否则显示数字和字母键盘
inpzm:function inpzm(e){
    let id = Number(e.currentTarget.id)
    this.setData({
      sta: id,
    })
  },
//获取点击的文字，赋值给第一个框的value，因为只有第一个框会调起文字键盘，并给下一个输入框增加样式
zim:function zim(e){
	let text1 = e.currentTarget.dataset.text
	this.setData({
	  text1,
	  sta: 2, 
	})
},
//回退事件--把当前输入框Value给空值，给上一个输入框增加样式
del:function del(){
    let info = 'text' + this.data.sta
    this.setData({
      [info]: '',
      sta: this.data.sta - 1,
    })
},
//动态赋值，先获取点击的value，然后赋值给点击的输入框，同时给下一个输入框增加样式
zim2:function zim(e){
    let text2 = e.currentTarget.dataset.text
    let info = 'text' + this.data.sta
    this.setData({
      [info]: text2,
      sta: this.data.sta + 1,
    })
},
//新能源和非新能源的切换
xin:function xin(){
    this.setData({
      xin: !this.data.xin,
    })
},

前两个输入框默认值为辽B，所以初始 sta=3 即默认选中第3个输入框。
在开发时，提交的时候要判断下用户是否选了新能源，如果是非新能源车，就要把 text8 赋值为空，不然有时候会出现用户没选新能源，但是提交时 text8 有值的情况，因为是动态赋值的。
其中键盘里放置了一张图片代表回退，要换成自己的路径，不然键盘样式会出现偏差。

提交代码：

submit() {
    if(this.data.xin){
      this.setData({
        text8: ''
      })
    }
    let car_plate = this.data.text1 + this.data.text2 + this.data.text3+ this.data.text4 + this.data.text5 + this.data.text6 + this.data.text7 + this.data.text8
    console.log("s",car_plate)
   //自己的逻辑代码
   //省略......
},

整体的代码包：https://github.com/LiLySDD/cphjp.git