微信小程序车牌号码模拟键盘输入功能的实现代码

 <view class='page wrapper'> <view class="weui-cell__bd">  <view bindtap='LicensePlateNumber' class='LicensePlateNumber'>  <input value='{{LicensePlateNumber}}' disabled='true' placeholder='请选择'></input>  </view> </view> <view>  <view class='licensePlateShow' hidden='{{licensePlateShowHidden}}'>  <!-- 遮罩层 -->  <view class='licensePlate_Bg' bindtap='licensePlate_close'>  </view>  <!-- 省份 -->  <view class='licensePlate_provinces_Box' hidden='{{licensePlate_provinces_Box}}'>   <view class='licensePlate_provincesTist' wx:for='{{licensePlate_provinces}}' bindtap='licensePlate_provinces' data-licensePlateProvinces='{{item}}' wx:key='index'>{{item}}</view>   <view class='licensePlate_but' bindtap='licensePlate_close'>关闭</view>  </view>  <!-- 字母 -->  <view class='licensePlate_letter_Box' hidden='{{licensePlate_letter_Box}}'>   <view class='licensePlate_letterTist' wx:for='{{licensePlate_letter}}' bindtap='licensePlate_letter' data-licensePlateProvinces='{{item}}' wx:key='index'>{{item}}</view>   <view class='licensePlate_letterTist_but'>   <view class='licensePlate_but' bindtap='licensePlate_switchDigital'>数字</view>   <view class='licensePlate_but' bindtap='licensePlate_delete'>删除</view>   <view class='licensePlate_but' bindtap='licensePlate_empty'>清空</view>   <view class='licensePlate_but' bindtap='licensePlate_close'>关闭</view>   </view>  </view>  <!-- 数字 -->  <view class='licensePlate_digital_Box' hidden='{{licensePlate_digital_Box}}'>   <view class='licensePlate_digitalTist' wx:for='{{licensePlate_digital}}' bindtap='licensePlate_digital' data-licensePlateProvinces='{{item}}' wx:key='index'>{{item}}</view>   <view class='licensePlate_digital_but'>   <view class='licensePlate_but' bindtap='licensePlate_switchLetter'>字母</view>   <view class='licensePlate_but' bindtap='licensePlate_delete'>删除</view>   <view class='licensePlate_but' bindtap='licensePlate_empty'>清空</view>   <view class='licensePlate_but' bindtap='licensePlate_close'>关闭</view>   </view>  </view>  </view> </view> </view>

@import "weui.wxss"; page{  min-height:%;  } .wrapper{  width: rpx;   overflow:hidden; } .licensePlateShow{ width: rpx;  min-height: %; position: absolute; bottom: ; } .licensePlate_Bg{ min-height: %; width: rpx; position: absolute; z-index: ; overflow: hidden; } .licensePlate_provinces_Box{ width: rpx;  background-color: #ddda; margin: auto; position: absolute; bottom: ; display: flex; display: -webkit-flex; flex-wrap: wrap; justify-content: flex-start; /* border-top: px solid #abbbd; */ z-index: ; } .licensePlate_provincesTist{ flex:%; height: rpx; line-height: rpx; margin: auto; text-align: center; background-color:#ffffff;  border-top: px solid #abbbd; border-left: px solid #abbbd; } .licensePlate_provincesTist:nth-child(n){ border-right: px solid #abbbd; } .licensePlate_letter_Box{ width: rpx;  background-color: #ddda; margin: auto; position: absolute; bottom: ; display: flex; display: -webkit-flex; flex-wrap: wrap; justify-content: flex-start; /* border-top: px solid #abbbd; */ z-index: ; } .licensePlate_letterTist{ flex:%; height: rpx; line-height: rpx; margin: auto; text-align: center; background-color:#ffffff;  border-top: px solid #abbbd; border-left: px solid #abbbd; } .licensePlate_letterTist:nth-child(n){ border-right: px solid #abbbd; }  .licensePlate_letterTist:nth-child(){ border-right: px solid #abbbd; } .licensePlate_letterTist_but{ width: rpx; display: flex; display: -webkit-flex; flex-wrap: wrap; justify-content: flex-start; } .licensePlate_digital_Box{ width: rpx;  background-color: #ddda; margin: auto; position: absolute; bottom: ; display: flex; display: -webkit-flex; flex-wrap: wrap; justify-content: flex-start; /* border-top: px solid #abbbd; */ z-index: ; } .licensePlate_digitalTist{ flex:%; height: rpx; line-height: rpx; margin: auto; text-align: center; background-color:#ffffff;  border-top: px solid #abbbd; border-left: px solid #abbbd; } .licensePlate_digital_but{ width: rpx; display: flex; display: -webkit-flex; flex-wrap: wrap; justify-content: flex-start; } .licensePlate_but{ flex: ; height: rpx; line-height: rpx; text-align: center; color: #ffffff; background-color:#ff;  border-top: px solid #abbbd; border-left: px solid #abbbd; } .licensePlate_but:last-child{ border-right: px solid #abbbd; } .LicensePlateNumber{ width: rpx; height: rpx; border-bottom: rpx solid #abbbd }

 Page({  data: {  licensePlateShowHidden:true,  licensePlate_provinces_Box:true,  licensePlate_letter_Box: true,   licensePlate_digital_Box: true,  licensePlate_provinces: [  "京", "沪", "浙", "苏", "粤", "鲁",   "晋", "冀", "豫", "川", "渝", "辽",   "吉", "黑", "皖", "鄂", "津", "贵",   "云", "桂", "琼", "青", "新", "藏",  "蒙", "宁", "甘", "陕", "闽", "赣",   "湘"  ],  licensePlate_letter: [  "A", "B", "C", "D", "E", "F",  "G", "H", "L", "J", "K", "L",  "M", "N", "O", "P", "Q", "R",  "S", "T", "U", "V", "W", "X",  "Y", "Z"  ],  licensePlate_digital: [  "", "", "",   "", "", "",  "", "", "",   ""  ],  LicensePlateNumber:'', }, // 显示模拟键盘 LicensePlateNumber:function(){  var that = this;  var LicensePlateNumber = this.data.LicensePlateNumber;  var LicensePlateNumberLen = LicensePlateNumber.length;  console.log(LicensePlateNumber, LicensePlateNumberLen)  if (LicensePlateNumberLen == ){  this.setData({   licensePlateShowHidden: false,   licensePlate_provinces_Box: false,  })  } else if (LicensePlateNumberLen == ){  this.setData({   licensePlateShowHidden: false,   licensePlate_letter_Box: false,  })  }else{  this.setData({   licensePlateShowHidden: false,   licensePlate_digital_Box: false,  })  } }, // 切换成字母 licensePlate_switchLetter:function(){  this.setData({  licensePlate_provinces_Box:true,  licensePlate_letter_Box:false,  licensePlate_digital_Box: true,  }) }, // 切换成数字 licensePlate_switchDigital: function () {  var LicensePlateNumber = this.data.LicensePlateNumber;  var LicensePlateNumberLen = LicensePlateNumber.length;  if (LicensePlateNumberLen == ){  wx.showToast({   title: '车牌号码第二位必须是字母',   icon: 'none',   duration: ,  })  }else{  this.setData({   licensePlate_provinces_Box: true,   licensePlate_letter_Box: true,   licensePlate_digital_Box: false,  })  } }, // 删除 licensePlate_delete: function (e) {  var LicensePlateNumber = this.data.LicensePlateNumber;  var LicensePlateNumberLen = LicensePlateNumber.length;  var LicensePlateNumberDelete = LicensePlateNumber.split('');  var NewLicensePlateNumber = LicensePlateNumberDelete.join('').slice(,-)  if (LicensePlateNumberDelete.slice(,-).length == ){  this.setData({   licensePlate_provinces_Box: true,   licensePlate_letter_Box: false,   licensePlate_digital_Box: true,  })  } else if (LicensePlateNumberLen == || LicensePlateNumber == '' || LicensePlateNumberDelete.slice(, -).length == ){  this.setData({   licensePlate_provinces_Box: false,   licensePlate_letter_Box: true,   licensePlate_digital_Box: true,  })  }  this.setData({   LicensePlateNumber: NewLicensePlateNumber  }) }, // 清空 licensePlate_empty: function (e) {  this.setData({  LicensePlateNumber:'',  licensePlate_provinces_Box: false,  licensePlate_letter_Box: true,  licensePlate_digital_Box: true,  }) }, // 关闭模拟键盘 licensePlate_close:function(){  this.setData({  licensePlateShowHidden: true  }) }, // 点击获取省份 licensePlate_provinces: function (e) {  this.setData({  LicensePlateNumber: e.target.dataset.licenseplateprovinces,  licensePlate_letter_Box: false,  licensePlate_digital_Box: true,  })  console.log(e.target.dataset.licenseplateprovinces) }, // 点击获取字母 licensePlate_letter: function (e) {  var LicensePlateNumber = this.data.LicensePlateNumber;  var LicensePlateNumberLen = LicensePlateNumber.length;  if (LicensePlateNumberLen != ) {  this.setData({   LicensePlateNumber: LicensePlateNumber + e.target.dataset.licenseplateprovinces  })  console.log(e.target.dataset.licenseplateprovinces)  } else {  wx.showToast({   title: '车牌号码最多不能超过位',   icon: 'none',   duration: ,  })  } }, // 点击获取数字 licensePlate_digital: function (e) {  var LicensePlateNumber = this.data.LicensePlateNumber;  var LicensePlateNumberLen = LicensePlateNumber.length;  if (LicensePlateNumberLen != ){  this.setData({   LicensePlateNumber: LicensePlateNumber + e.target.dataset.licenseplateprovinces  })  console.log(e.target.dataset.licenseplateprovinces)  }else{  wx.showToast({   title: '车牌号码最多不能超过位',   icon:'none',   duration:,  })  } }, })