微信小程序自定义车牌号输入键盘--增强版

分享也是一种美德。欢迎加我技术交流QQ群 ：811956471

一、项目简介、结构、效果预览
1、项目简介：键盘已做过技术处理，第一位只能是省份简称，第二位只能输入字母，第三位以后可以输入数字加字母的组合，输入完成后有正则方法校验车牌号的合法性。高效率车牌号输入键盘，大大提升用户体验，增强用户输入车牌号的真实性。

二、组件源码

html：

关闭键盘


  
    {{item}}
  
  
    {{item}}
  
  
    {{item}}
  
  
    {{item}}
  


  
  
    
      {{item}}
    
  
  
  
    {{item}}
  
  
    {{item}}
    
      删除
    
  
  
    {{item}}
    完成
  

:host {
  width: 100%;
}

.vehicle-panel {
  width: 100%;
  position: fixed;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 1000;
}
.offkey{
  text-align: center;
  font-size: 30rpx;
}
.vehicle-panel-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.vehicle-panel-row-last {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.vehicle-panel-row-button {
  background-color: #fff;
  margin: 5rpx;
  padding: 5rpx;
  width: 80rpx;
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  border-radius: 10rpx;
}

.vehicle-panel-row-button-number {
  background-color: #eee;
}

.vehicle-panel-row-button-last {
  width: 90rpx;
  height: 90rpx;
  line-height: 90rpx;
}

.vehicle-hover {
  background-color: #ccc;
}

.vehicle-panel-row-button-img {
  display: flex;
  justify-content: center;
  align-items: center;
}

.vehicle-en-button-delete {
  width: 55rpx;
  height: 85rpx;
}

.vehicle-panel-ok {
  background-image: linear-gradient(0deg, #00a878 0%, #00cddc 100%),
                      linear-gradient(#413f3f, #413f3f);
  color: #fff;
  width: 150rpx;
  height: 80rpx;
  font-size: 30rpx;
}

js：
Component({
  externalClasses: ['v-panel'],
  properties: {
    isShow: {
      type: Boolean,
      value: false,
    },
    buttonBorder: {
      type: String,
      value: "1px solid #ccc"
    },
    backgroundColor: {
      type: String,
      value: "#fff"
    },
    //1为省份键盘，其它为英文键盘
    keyBoardType: {
      type: Number,
      value: 1,
    },
    //true 显示键盘数字部分  
    numBoard: {
      type: Boolean,
      value: false,
    }
  },
  data: {
    keyVehicle1: '陕京津沪冀豫云辽',
    keyVehicle2: '黑湘皖鲁新苏浙赣',
    keyVehicle3: '鄂桂甘晋蒙吉闽贵',
    keyVehicle4: '粤川青藏琼宁渝',
    keyNumber: '1234567890',
    keyEnInput1: 'QWERTYUIOP',
    keyEnInput2: 'ASDFGHJKL',
    keyEnInput3: 'ZXCVBNM',
  },
  methods: {
    offkr:function(){
      let that = this;
      that.setData({
        isShow: false,
      })
    },
    vehicleTap: function(event) {
      let val = event.target.dataset.value;
      switch (val) {
        case 'delete':
          this.triggerEvent('delete');
          // this.triggerEvent('inputchange');
          break;
        case 'ok':
          this.triggerEvent('ok');
          break;
        default:
          this.triggerEvent('inputchange', val);
      }
    },
  }
});
json:
{
  "component": true
}

三、组件使用方法

  车牌号：{{textValue}}
  |

.focus_move {
  color: green;
  font-size: 30rpx;
  animation: focus 0.7s infinite;
}

/* 光标动画 */

@keyframes focus {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}
.text_con_focus{
   font-size: 30rpx;
}
var car_num = ""
Page({
  data: {
    textValue: "", //最终的输入内容
    keyBoardType: 1, //控制键盘显示类型,1为省份简写,2为英文简写
    numBoard: false, //控制  是否显示 英文简写中的数字部分键盘  true 为显示
    isShow: false, //控制键盘是否显示,true显示，false不显示
  },
  onShow: function () {

  },
  
  //控制键盘显示
  bindFocus: function(e) {
    let that = this;
    that.setData({
      isShow: true,
    })
  },
 
  //键盘输入事件
  inputChange: function(e) {
    let car_val = e.detail;
    let that = this;
    //超过8位后截取前8位
    if (that.data.textValue.length >= 8) {
      car_num = that.data.textValue.substr(0, 8)
    }else{
      car_num += car_val;
    }
  
    is_show(that, car_num)
  },
  //键盘删除事件
  inputdelete: function(e) {
    let that = this;
    car_num = car_num.substring(0, car_num.length - 1)
    console.log(car_num)
    is_show(that, car_num)
  },
  //确定事件
  inputOk:function(e) {
    let that = this;
    that.setData({
      isShow: false,
    })
    console.log(that.data.textValue)
  },
})

//控制键盘的方法包装
function is_show(that,val) {
  //1为省份简写,2为英文简写
  if (val.length >= 1) {
    that.setData({
      keyBoardType: 2,
    })
  } else {
    that.setData({
      keyBoardType: 1,
    })
  }
  //控制  是否显示数字部分键盘
  if (val.length >= 2) {
    that.setData({
      numBoard: true,
    })
  } else {
    that.setData({
      numBoard: false,
    })
  }
  that.setData({
    textValue: car_num
  })
}
{
  "component": true,
  "usingComponents": {
    "v-panel": "../../componet/select_car_number/select_car_number"
  }
}