微信小程序车牌号输入demo

效果如下：


地区选择


开头字母
港澳台限制
可输入港澳台

项目源码：

wxml文件：

<view class="pages">

  <view class='tips'>

    <text>点击方框输入车牌号</text>

  </view>

  <view class="plate-input-body">

    <view class="new-plate-input-content" >

      <view class="{{inputOnFocusIndex=='0'?'plate-nums-foc rightb1':'plate-nums-first rightb'}} ">

        <text bindtap="inputClick" class="plate-num-text" data-id="0">{{inputPlates.index0}}</text>

      </view>

      <view class="{{inputOnFocusIndex=='1'?'plate-nums-foc leftb1':'plate-nums-first leftb'}} ">

        <text bindtap="inputClick" class="plate-num-text" data-id="1">{{inputPlates.index1}}</text>

      </view>

      <view class="dos-style"><text></text></view>

      <view class="{{inputOnFocusIndex=='2'?'plate-nums-foc':'plate-nums-first'}}">

        <text bindtap="inputClick" class="plate-num-text" data-id="2">{{inputPlates.index2}}</text>

      </view>

      <view class="{{inputOnFocusIndex=='3'?'plate-nums-foc':'plate-nums-first'}}">

        <text bindtap="inputClick" class="plate-num-text" data-id="3">{{inputPlates.index3}}</text>

      </view>

      <view class="{{inputOnFocusIndex=='4'?'plate-nums-foc':'plate-nums-first'}}">

        <text bindtap="inputClick" class="plate-num-text" data-id="4">{{inputPlates.index4}}</text>

      </view>

      <view class="{{inputOnFocusIndex=='5'?'plate-nums-foc':'plate-nums-first'}}">

        <text bindtap="inputClick" class="plate-num-text" data-id="5">{{inputPlates.index5}}</text>

      </view>

      <view class="{{inputOnFocusIndex=='6'?'plate-nums-foc':'plate-nums-first'}}">

        <text bindtap="inputClick" class="plate-num-text" data-id="6">{{inputPlates.index6}}</text>

      </view>

      <view class="{{inputOnFocusIndex=='7'?'plate-nums-foc':'plate-nums-first newnw'}} ">

        <text  bindtap="inputClick" class="plate-num-text {{inputPlates.index7==''?'newnw-color on':'def'}}" data-id="7">{{inputPlates.index7==""&&inputOnFocusIndex!='7'?isnewNw : inputPlates.index7}}</text>

      </view>

    </view>

  </view>

  <view class="plate-style">

    <button type="default" class="{{isbtns?'def':'on'}}" bindtap="plateCar" disabled="{{isbtns}}">查询我的车牌</button>

  </view>

  <!--键盘-->

  <view class="keyboard" wx:if="{{isKeyboard}}">

    <view class="kb_top">

      <text catchtap="tapSpecBtn" data-index="1" class="cloose-key-b">关闭</text>

    </view>

    <view style="width:100%; text-align:center;" wx:if="{{!isNumberKB}}">

      <view style="width:99%;display:flex;text-align:center;margin:0 auto">

        <view catchtap="tapKeyboard" class="td td_nor" data-index="{{idx}}" data-val="{{itemName}}" hoverClass="board_bg" hoverStartTime="0" hoverStayTime="80" wx:if="{{idx<=9}}" wx:for="{{keyboard1}}" wx:for-index="idx" wx:for-item="itemName" wx:key="{{itemName}}">

          {{itemName}}

        </view>

      </view>

      <view style="display:flex;text-align:center; width:99%;margin:0 auto">

        <view catchtap="tapKeyboard" class="td td_nor" data-index="{{idx}}" data-val="{{itemName}}" hoverClass="board_bg" hoverStartTime="0" hoverStayTime="80" wx:if="{{idx<=19&&idx>9}}" wx:for="{{keyboard1}}" wx:for-index="idx" wx:for-item="itemName" wx:key="{{itemName}}">

          {{itemName}}

        </view>

      </view>

      <view style="display:flex;text-align:center; width:99%;margin:0 auto">

        <view catchtap="tapKeyboard" class="td td_nor" data-index="{{idx}}" data-val="{{itemName}}" hoverClass="board_bg" hoverStartTime="0" hoverStayTime="80" wx:if="{{idx<=29&&idx>19}}" wx:for="{{keyboard1}}" wx:for-index="idx" wx:for-item="itemName" wx:key="{{itemName}}">

          {{itemName}}

        </view>

      </view>

      <view style="display:flex; width:60%;text-align:center;">

        <view catchtap="tapKeyboard" class="td td_nor" data-index="{{idx}}" data-val="{{itemName}}" hoverClass="board_bg" hoverStartTime="0" hoverStayTime="80" wx:if="{{idx>29}}" wx:for="{{keyboard1}}" wx:for-index="idx" wx:for-item="itemName" wx:key="{{itemName}}">

          {{itemName}}

        </view>

      </view>

      <view bindtap="tapSpecBtn" class="del-first" data-index="0" hoverClass="del-hover" hoverStartTime="0" hoverStayTime="80">

      x

      </view>

    </view>

    <view style="width:100%; text-align:center;" wx:if="{{isNumberKB}}">

      <view style="width:99%;display:flex;text-align:center;margin:0 auto">

        <view class="td td_num board_bg" wx:if="{{!tapNum&&idx<=9}}" wx:for="{{keyboardNumber}}" wx:for-index="idx" wx:for-item="itemName" wx:key="{{itemName}}">

          {{itemName}}

        </view>

      </view>

      <view style="width:99%;display:flex;text-align:center;margin:0 auto">

        <view catchtap="tapKeyboard" class="td td_num" data-index="{{idx}}" data-val="{{itemName}}" hoverClass="board_bg" hoverStartTime="0" hoverStayTime="80" wx:if="{{tapNum&&idx<=9}}" wx:for="{{keyboardNumber}}" wx:for-index="idx" wx:for-item="itemName" wx:key="{{itemName}}">

          {{itemName}}

        </view>

      </view>

      <view style="width:99%;display:flex;text-align:center;margin:0 auto">

        <view catchtap="tapKeyboard" class="td td_num" data-index="{{idx}}" data-val="{{itemName}}" hoverClass="board_bg" hoverStartTime="0" hoverStayTime="80" wx:if="{{idx>9&&idx<=19}}" wx:for="{{keyboardNumber}}" wx:for-index="idx" wx:for-item="itemName" wx:key="{{itemName}}">

          {{itemName}}

        </view>

      </view>

      <view style="width:99%;display:flex;text-align:center;margin:0 auto">

        <view catchtap="tapKeyboard" class="td td_num" data-index="{{idx}}" data-val="{{itemName}}" hoverClass="board_bg" hoverStartTime="0" hoverStayTime="80" wx:if="{{idx>19&&idx<=29}}" wx:for="{{keyboardNumber}}" wx:for-index="idx" wx:for-item="itemName" wx:key="{{itemName}}">

          {{itemName}}

        </view>

      </view>

      <view style="width:79%;display:flex;text-align:left; margin-left:5rpx;">

        <view catchtap="tapKeyboard" class="td td_num" data-index="{{idx}}" data-val="{{itemName}}" hoverClass="board_bg" hoverStartTime="0" hoverStayTime="80" wx:if="{{idx>29&&idx<=33}}" wx:for="{{keyboardNumber}}" wx:for-index="idx" wx:for-item="itemName" wx:key="{{itemName}}">

          {{itemName}}

        </view>

        <view class="td td_num board_bg" wx:if="{{!bottomNum&&idx>33}}" wx:for="{{keyboardNumber}}" wx:for-index="idx" wx:for-item="itemName" wx:key="{{itemName}}">

          {{itemName}}

        </view>

        <view catchtap="tapKeyboard" class="td td_num" data-index="{{idx}}" data-val="{{itemName}}" hoverClass="board_bg" hoverStartTime="0" hoverStayTime="80" wx:if="{{bottomNum&&idx>33}}" wx:for="{{keyboardNumber}}" wx:for-index="idx" wx:for-item="itemName" wx:key="{{itemName}}">

          {{itemName}}

        </view>

      </view>

      <view bindtap="tapSpecBtn" class="del-first" data-index="0" hoverClass="del-hover" hoverStartTime="0" hoverStayTime="80">

      x

      </view>

    </view>

  </view>

</view>


wxss文件：

.pages_header{

  width: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

}

.pages_header_top{

  width:33.3%;

  height: 60rpx;

  border-left: 5px solid green;

  border-right: 5px solid green;

}

.pages_header_btm{

  width:70%;

  background: green;

  height: 120rpx;

  line-height: 120rpx;

  text-align: center;

  color: white;

  border-radius: 10rpx;

  font-weight: normal;

  font-size: 16pt;

}

.tips{

  text-align: center;

  margin: 60rpx 0;

  font-size: 12pt;

  color: #888888;

}

.plate-input-flag{

  margin: 30rpx 10rpx 30rpx 0;

  color: green;

  float: right;

}

.plate-input-body {

  /*border: 1px solid red;*/

  height: 90rpx;

  margin: 0 0 0 10rpx;

}

.plate-input-content {

  display: flex;

  flex-direction: row;

  height: 90rpx;

}

.plate-nums-foc{

    flex: 1;

    border: 2rpx solid #5485FF;

    margin-right: 10rpx;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    height: 100%;

    box-sizing: border-box;

    border-radius: 4rpx;

}

.plate-nums-first{

    flex: 1;

    border: 2rpx solid #ccc;

    margin-right: 10rpx;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    height: 100%;

    box-sizing: border-box;

    border-radius: 4rpx;

}

.plate-num-text {

    flex: 1;

    line-height: 80rpx;

    height: 100%;

    box-sizing: border-box;

    border-radius: 4rpx;

    font-size: 40rpx;

    font-weight: normal;

}

.new-plate-input-content{

  display: flex;

  flex-direction: row;

  height: 90rpx;

}

.kb_top {

    align-content: relative;

    width: 100%;

    height: 74rpx;

    background: #fff;

    border-top: solid #ebebeb 2rpx;

    border-bottom: 15rpx solid #d7d8dc;

}

.keyboard {

    z-index: 9999;

    position: fixed;

    bottom: 0;

    left: 0;

    width: 100%;

    height: auto;

    background: #d7d8dc;

    display: flex;

    flex-wrap: wrap;

    border-bottom: 15rpx solid #d7d8dc;

}

.td {

    font-family: "微软雅黑";

    flex-grow: 1;

    text-align: center;

    font-size: 34rpx;

    height: 86rpx;

    line-height: 80rpx;

    background: #fff;

    margin: 10rpx 5rpx;

    color: #333;

    border-radius: 10rpx 10rpx 10rpx 10rpx;

    box-shadow: 0rpx 2rpx 0rpx #a9a9a9;

}

.td_nor {

    flex: 1 1 6%;

}

.td_num {

    flex: 1 1 8%;

}

.td_spec {

    flex: 1 1 12%;

}

.board_bg {

    box-shadow: 0 0 0 #e5e5e5;

    background: #e5e5e5;

}

.del-first {

    position: absolute;

    bottom: 10rpx;

    right: 10rpx;

    width: 137rpx;

    height: 86rpx;

    background-color: #fff;

    box-shadow: 0rpx 2rpx 0rpx #a9a9a9;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10rpx;

    color: #5485FF

}

.del-hover {

    position: absolute;

    bottom: 10rpx;

    right: 10rpx;

    width: 137rpx;

    height: 86rpx;

    background-color: #e5e5e5;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10rpx;

    box-shadow: 0 0 0 #e5e5e5;

}

.del-img {

    display: block;

    width: 46rpx;

    height: 38rpx;

}

.plate-style{

  margin-top: 70rpx;

}

.plate-style button{

  margin: 0 10rpx;

  color: #fff;

}

.plate-style button.on{

  background: #5485FF;

  transition: all 0.2s;

}

.plate-style button.def{

  background: #799ffd;

  color: #fff;


}

.plate-style button.on:active{

  background: #3e75ff;

}

.cloose-key-b{

position:absolute;

right:0;

display:block;

height:74rpx;

padding:0 34rpx;

color:#5485FF;

line-height:74rpx;

  font-size: 30rpx;

}

.rightb{

  border-right: 2rpx solid rgba(255,255,255,0);

  margin-right: 0rpx;

  border-radius:4rpx 0rpx 0rpx 4rpx;

  position: relative;

}

.rightb1{

  /* border-right: 2rpx solid #00bf70; */

  border-radius:4rpx;

  margin-right: 0rpx;

}

.rightb:after{

  position: absolute;

  content: "";

  top: 20rpx;

  bottom: 20rpx;

  right: -1rpx;

  width:2rpx;

  background: #ccc;

}

.leftb{

  margin-left: -2rpx;

  border-left: 2rpx solid rgba(255,255,255,0);

  border-radius:0rpx 4rpx 4rpx 0rpx;

}

.leftb1{

  margin-left: -2rpx;

  border-radius:4rpx;

  z-index: 999

}

.newnw{

  border: 2rpx dashed #ccc;

}

.newnw text.on{

  line-height: 40rpx;

}

.newnw text.def{

  line-height: 80rpx;

}

.newnw-color{

  font-size: 20rpx;

  color: #666;

}

.dos-style{

  display: flex;

  align-items: center;

  margin-right: 10rpx;

}

.dos-style text{

  display: inline-block;

  width: 10rpx;

  height: 10rpx;

  border-radius: 5rpx;

  background: #666;

}


js文件：


Page({

  data: {

    isKeyboard: !1, //控制键盘外部显示

    isNumberKB: !1, //键盘切换

    tapNum: !1, //控制数字

    bottomNum: !1,//控制港澳使学

    disableKey: "1234567890港澳学使",

    keyboardNumber: "1234567890ABCDEFGHJKLMNPQRSTUVWXYZ港澳学使",

    keyboard1: "京沪粤津冀晋蒙辽吉黑苏浙皖闽赣鲁豫鄂湘桂琼渝川贵云藏陕甘宁青新港澳台使无",

    inputPlates: {

      index0: "粤",

      index1: "B",

      index2: "",

      index3: "",

      index4: "",

      index5: "",

      index6: "",

      index7: ""

    },

    inputOnFocusIndex: "",

    isnewNw:'+\n新能源',

    isbtns:true,

    plate:"",

    flag: false

  },

  onLoad: function () {

    this.initPlate(); //初始化获取车牌

  },

  initPlate:function(){

  let n = this.data.inputPlates.index0 + this.data.inputPlates.index1 + this.data.inputPlates.index2 +  this.data.inputPlates.index3    +      this.data.inputPlates.index4 + this.data.inputPlates.index5 + this.data.inputPlates.index6 + this.data.inputPlates.index7;

    let plates = this.data.inputPlates;

    let len;

    if (plates.index0 == '' || plates.index1 == '' || plates.index2 == '' || plates.index3 == '' || plates.index4 == '' || plates.index5 == '' || plates.index6 == ''){

      len = true;

    }else{

      len = false

    }

    this.setData({

      plate: n, //更新车牌

      isbtns: len //更新按钮状态

    });

  },

  inputClick: function (t) { //点击输入选项

    var that = this;

    that.setData({

      inputOnFocusIndex: t.target.dataset.id,

      isKeyboard: !0

    })

    "0" == this.data.inputOnFocusIndex ? that.setData({

      tapNum: !1,

      isNumberKB: !1,

      bottomNum: !1

    }) : "1" == this.data.inputOnFocusIndex ? that.setData({

      tapNum: !1,

      isNumberKB: !0,

      bottomNum: !1

      }) : "6" == this.data.inputOnFocusIndex ? that.setData({

        tapNum: !0,

        isNumberKB: !0,

        bottomNum :!0

    }) :that.setData({

      tapNum: !0,

      isNumberKB: !0,

      bottomNum: !1

    });

  },

  //键盘点击事件

  tapKeyboard: function (t) {

    t.target.dataset.index;

    var a = t.target.dataset.val;

    switch (this.data.inputOnFocusIndex) {

      case "0":

        this.setData({

          "inputPlates.index0": a,

          inputOnFocusIndex: "1"

        });

        break;

      case "1":

        this.setData({

          "inputPlates.index1": a,

          inputOnFocusIndex: "2"

        });

        break;

      case "2":

        this.setData({

          "inputPlates.index2": a,

          inputOnFocusIndex: "3"

        });

        break;

      case "3":

        this.setData({

          "inputPlates.index3": a,

          inputOnFocusIndex: "4"

        });

        break;

      case "4":

        this.setData({

          "inputPlates.index4": a,

          inputOnFocusIndex: "5"

        });

        break;

      case "5":

        this.setData({

          "inputPlates.index5": a,

          inputOnFocusIndex: "6"

        });

        break;

      case "6":

        this.setData({

          "inputPlates.index6": a,

          inputOnFocusIndex: ""

        });

        break;

      case "7":

        this.setData({

          "inputPlates.index7": a,

          inputOnFocusIndex: ""

        });

    }

    this.initPlate();//监听车牌实时变化

    this.checkedSubmitButtonEnabled();

    if (this.data.inputOnFocusIndex == ''){

      this.setData({

        isKeyboard: !1,

        isNumberKB: !1,

        bottomNum: !1,

        inputOnFocusIndex: ""

      });

    }

  },

  //键盘关闭按钮点击事件

  tapSpecBtn: function (t) {

    var a = this, e = t.target.dataset.index;

    if (0 == e) {

      switch (parseInt(this.data.inputOnFocusIndex)) {

        case 0:

          this.setData({

            "inputPlates.index0": "",

            inputOnFocusIndex: "0"

          });

          break;

        case 1:

          this.setData({

            "inputPlates.index1": "",

            inputOnFocusIndex: "0"

          });

          break;

        case 2:

          this.setData({

            "inputPlates.index2": "",

            inputOnFocusIndex: "1"

          });

          break;

        case 3:

          this.setData({

            "inputPlates.index3": "",

            inputOnFocusIndex: "2"

          });

          break;

        case 4:

          this.setData({

            "inputPlates.index4": "",

            inputOnFocusIndex: "3"

          });

          break;

        case 5:

          this.setData({

            "inputPlates.index5": "",

            inputOnFocusIndex: "4"

          });

          break;

        case 6:

          this.setData({

            "inputPlates.index6": "",

            inputOnFocusIndex: "5"

          });

          break;

        case 7:

          this.setData({

            "inputPlates.index7": "",

            inputOnFocusIndex: "6"

          });

      }

      this.checkedSubmitButtonEnabled();

    } else 1 == e && a.setData({

      isKeyboard: !1,

      isNumberKB: !1,

      bottomNum: !1,

      inputOnFocusIndex: ""

    });

    this.initPlate(); //监听车牌实时变化

  },

  //键盘切换

  checkedKeyboard: function () {

    var t = this;

    "0" == this.data.inputOnFocusIndex ? t.setData({

      tapNum: !1,

      isNumberKB: !1,

      bottomNum: !1

    }) : "1" == this.data.inputOnFocusIndex ? t.setData({

      tapNum: !1,

      isNumberKB: !0,

      bottomNum: !1

      }) : "6" == this.data.inputOnFocusIndex ? t.setData({

        tapNum: !0,

        isNumberKB: !0,

        bottomNum: !0

      }) :this.data.inputOnFocusIndex.length > 0 && t.setData({

      tapNum: !0,

      isNumberKB: !0,

      bottomNum: !1

    });

  },

  checkedSubmitButtonEnabled: function () {

    this.checkedKeyboard();

    var t = !0;

    for (var a in this.data.inputPlates) if ("index7" != a && this.data.inputPlates[a].length < 1) {

      t = !1;

      break;

    }

  },

  plateCar:function(){

    console.log(this.data.plate);

      wx.showModal({

        title: '',

        content: '请输入正确的车牌号码',

        showCancel:false,

        confirmText:'取消',

        success(res) {

          if (res.confirm) {

            console.log('点击取消操作');

          }

        }

      })

  },

})

参考

https://blog.csdn.net/qq_33307682/article/details/85275201

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 216,142评论 6赞 498
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,298评论 3赞 392
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 162,068评论 0赞 351
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,081评论 1赞 291
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,099评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,071评论 1赞 295
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,990评论 3赞 417
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,832评论 0赞 273
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,274评论 1赞 310
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,488评论 2赞 331
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,649评论 1赞 347
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,378评论 5赞 343
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,979评论 3赞 325
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,625评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,796评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,643评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,545评论 2赞 352