微信小程序 自助停车，输入车牌号功能实现

话不多说，先上效果图

1. 效果图 ( 改一改h5也能用 )
   
   

2. 功能列表

1. 根据输入位置自动显示下方键盘为候选地区或数字字母
2. 输入位置后自动跳转至下一位
3. 删除号码后自动返回上一位
4. 点击可选填新能源号码

3. 代码复现
   3.1 html结构

<view class="root">
  <view class="title">请输入要授权的车牌号<text class="gray f-26">（新能源车辆选填）</text></view>
  <!-- 车牌选框 -->
  <view class="num-box">
    <block wx:for='{{car}}' wx:for-item='box' wx:for-index='idx'>
      <view id="{{idx}}" class="box {{idx==selectIdx?'active':''}}" style="{{idx==7&&box.text=='新能源'?'':'font-size:30rpx;color:#333333;'}}" catchtap="selectCarNum">{{box.text}}</view>
    </block>
  </view>

  <button class="btn" catchtap="btnTap">下一步</button>
</view>

<!-- 键盘 -->
<view class="keyboard-box">
  <block wx:for='{{keyboardList}}' >
    <button hover-class="keyboard-hover" class="{{(selectIdx==1&&index<=9)||(selectIdx>=1&&index>=36)?'keyboard banKeyboard':'keyboard'}}" data-idx="{{index}}" catchtap="{{(selectIdx==1&&index<=9)||(selectIdx>=1&&index>=36)?'':'keyboardTap'}}">{{item}}</button>
  </block>
  <button hover-class="keyboard-hover" class="delete-key" catchtap="deleteTap">
    <image class="delete-key-logo" mode="widthFix" src="/images/delete-key-logo.png"></image>
  </button>
</view>

3.2 js初始数据

data: {
    selectIdx:'0', //当前输入框的索引
    carNumber:'', //最终的车牌号
    car:[ //车牌
      { id: 0, text: '' },
      { id: 1, text: '' },
      { id: 2, text: '' },
      { id: 3, text: '' },
      { id: 4, text: '' },
      { id: 5, text: '' },
      { id: 6, text: '' },
      { id: 7, text: '新能源' },
    ],
    keyboard1:'京津沪渝苏浙豫粤川陕冀辽吉皖闽鄂湘鲁晋黑赣贵甘桂琼云青蒙藏宁新使领警港澳台学',
    keyboard2:'1234567890ABCDEFGHJKLMNOPQRSTUVWXYZ学澳港',
  },
  onLoad: function (options) {
  	//页面初始化时候加载一下键盘的数据，默认为地区显示。
    let keyboardList1 = this.data.keyboard1.split('');
    let keyboardList2 = this.data.keyboard2.split('');
    this.setData({ 
      keyboardList:keyboardList1,
      keyboardList1,
      keyboardList2
    })
  },

3.3 js对输入框及键盘的处理方法

  selectCarNum(e){ //点击框
    let that = this;
    let { selectIdx } = that.data;
    let idx = e.currentTarget.id;
    idx == 7 && selectIdx==(6||7) ? selectIdx = 7 : '';
    that.setData({ selectIdx })
  },

  keyboardTap(e){ //点击键盘
    let that = this;
    let idx = e.currentTarget.dataset.idx;
    let { keyboardList,keyboardList1,keyboardList2, car, selectIdx } = that.data;
    car[selectIdx].text = keyboardList[idx];
    selectIdx != (6 || 7) ? selectIdx++ : '';
    that.changeKeyboard(selectIdx);
    that.setData({
      car,selectIdx,
    })
  },
  deleteTap(){ //删除
    let that = this;
    let { keyboardList, keyboardList1,keyboardList2,car, selectIdx } = that.data;
    car[selectIdx].text=''
    if(selectIdx == 7){ car[7].text = '新能源'}
    selectIdx == 0 ? selectIdx = 0 : selectIdx--;
    that.changeKeyboard(selectIdx);
    that.setData({
      car, selectIdx,
    })
  },

  changeKeyboard(selectIdx){ //根据当前索引切换键盘
    let { keyboardList, keyboardList1, keyboardList2} = this.data;
    selectIdx <= 0 ? keyboardList = keyboardList1 : keyboardList = keyboardList2
    this.setData({ keyboardList })
  },

  btnTap(){ //提交
    let that = this;
    let { car } = that.data;
    let carNumber=[];
    let check=true;
    car.map((v,k)=>{
      if(v.text==''){
        wx.showToast({
          title: '请正确填写车牌',
          icon: 'none',
          duration: 1500,
        })
        return check = false;
      }
      if(v.text!='新能源'){
        carNumber.push(v.text)
      }
    })
    if(!check){return}
    var number = carNumber.join(''); //提交的车牌号
    that.setData({carNumber:number})
    
    wx.setStorageSync('carNumber', number)
    wx.navigateBack({
      delta: 1,
    })
  
  },

3.4 css样式

.title{
  font-size:36rpx;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(51,51,51,1);
  margin: 80rpx 0 40rpx;
}

/* 车牌选框 */
.num-box{
  display: flex;
  flex-wrap: nowrap;

}
.box{
  flex-shrink: 0;
  width:70rpx;
  height:90rpx;
  margin-right: 12rpx;
  text-align: center;
  line-height: 90rpx;
  border:2rpx solid rgba(210,210,210,1);
  border-radius:10rpx;
  font-size:30rpx;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(51,51,51,1);
}
.box:nth-child(2){
  margin-right: 29rpx;
  position: relative;
}
.box:last-child{
  margin-right: 0;
  font-size:18rpx;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(168,168,168,1);
}
.box:nth-child(2)::after{
  position: absolute;
  content: '';
  width:8rpx;
  height:8rpx;
  border-radius: 50%;
  background: black;
  display: inline-block;
  top: 50%;
  transform: translateY(-50%);
  right: -20rpx;
  margin: 0;
  padding: 0;
  font-size:48rpx;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(51,51,51,1);
}
.box.active{
  border:2rpx solid #44C75F;
}
.btn{
  width:690rpx;
  height:90rpx;
  margin: 80rpx 0 34rpx;
  line-height: 90rpx;
  background:#44C75F;
  border-radius:45rpx;
  font-size:32rpx;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(255,255,255,1);
}
.keyboard-box{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  box-sizing: border-box;
  padding-top: 27rpx;
  padding-left: 10rpx;
  display: flex;
  flex-wrap: wrap;
  width: 750rpx;
  height: 470rpx;
  background: #CED4DB;
}
.keyboard{
  padding: 0;
  margin-left: 0;
  width:66rpx;
  height:92rpx;
  margin-right: 8rpx;
  margin-bottom: 16rpx;
  background:rgba(255,255,255,1);
  box-shadow: 1rpx 2rpx 2rpx #A8A8A8;
  border-radius:8rpx;
  line-height: 92rpx;
  text-align: center;
  font-size:36rpx;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(0,0,0,1);
}
.banKeyboard{
  color: #D2D2D2;
}
.keyboard-hover{
  transform: scale(1.1);
}
.delete-key{
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width:135rpx;
  height:92rpx;
  background:rgba(255,255,255,1);
  border-radius:8rpx;
}
.delete-key-logo{
  width: 61rpx;
}