当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 微信小程序车牌号码模拟键盘输入功能的实现代码

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

2019年06月02日  | 移动技术网IT编程  | 我要评论

先来一波预览图。

预览图片一：

预览图二：

预览图三：

 预览图四：

预览图五：

 大概的效果就和原来图差不多。

思路解析：车牌号码由31位汉字，26位字母，10位数字组成的，开头第一位由省份简称的汉字，第二位字母根据省份下的城市或地区区分，最后的五位或者六位，是有字母和数字组成的，共有七位的车牌号码和八位的车牌号码，（注：其中的八位数的车牌号码为能源车的车牌号码。）

大概的逻辑思维，不包含代码获取值什么的或者验证其他的说明，详细看代码片段。

第一，原型的设计思路：先设计好模拟键盘的大概架构，样式。这里的分为三个不同的模拟键盘结构合在一起，分部为汉字，字母，数字，其样式统一；

第二：数据的交互思路：对需要的数据绑定或者修改填充等，如何获取，通过什么方式获取，再怎么反馈出来，需要搭建好数据的来回交互传递的大概模型；

第三，交互的体验思路：触发或者在输入框点击输入的时候，启动模拟键盘，先用汉字选择，其次是字母，最后由字母和数字混合，对三个架构先进行需求排序的理清；

第四，功能的操作思路：模拟键盘的功能性按钮，比如数字与字母之间的的切换，删除最后一位数据，清空全部数据和状态，关闭的结束等操作等体验。

第五：输入判断的思路：判断车牌号码输入的位数，第一位和第二位分部是什么，字母与数字的切换的判断。删除到第几位需要在什么样的状态输入下等。

大概就这这些样子了，能写怎么多字，感觉都超纲了，如果有错的地方，还望留言指正。

最后是源码：

wxml：

 

 <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>

wxss：

  

@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
 }

js：

  

 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:,
  })
  }
 },
 })

总结

以上所述是小编给大家介绍的微信小程序车牌号码模拟键盘输入功能的实现代码，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网