小程序模拟输入车牌号键盘

最新推荐文章于 2022-11-16 14:48:49 发布
最新推荐文章于 2022-11-16 14:48:49 发布
阅读量968 收藏
点赞数
分类专栏： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43831302/article/details/104531765
版权

wxml

       <view class=''>车牌号</view>
              <view class='to-flex-center-between' bindtap='licensePlateNumber'>
                <view bindtap='getFocus' class='codeView to-relative margin-top-small'>
                  <view class='codeTab {{codeList.length>0?"codeTabFocus":""}}'>{{codeList[0]}}</view>
                  <view class='codeTab {{codeList.length>1?"codeTabFocus":""}}'>{{codeList[1]}}</view>
                  <view class='codeTab {{codeList.length>2?"codeTabFocus":""}}'>{{codeList[2]}}</view>
                  <view class='codeTab {{codeList.length>3?"codeTabFocus":""}}'>{{codeList[3]}}</view>
                  <view class='codeTab {{codeList.length>4?"codeTabFocus":""}}'>{{codeList[4]}}</view>
                  <view class='codeTab {{codeList.length>5?"codeTabFocus":""}}'>{{codeList[5]}}</view>
                  <view class=' codeTab {{codeList.length>6?"codeTabFocus":""}}'>{{codeList[6]}}
                  </view>
                  <view class=' codeTab {{codeList.length>7?"codeTabFocus":""}}'>{{codeList[7]}}
                    <image src='/images/xinnengyuan-icon.png' style='width:68rpx;height:auto;right:-10rpx;top:-10rpx;position:absolute' mode='widthFix'></image>
                  </view>
                </view>
              </view>

因为模拟不了原生间键盘会让整个页面如果遮挡住了往上弹起特将键盘写成弹框模式

<!-- 输入车牌号弹框 -->
<view class='shadow' wx:if='{{ plateListFlag }}'></view>
<view wx:if='{{ plateListFlag }}' class='plateList box-sizing'>
  <view class='to-flex-center-between ' style='padding:0 40rpx;margin-bottom:20rpx'>
    <view class='color-11141A font-size-bigger font-weight-bold'>车牌号</view>
    <image src='/images/cancel-black.png' style='width:44rpx;height:auto' mode='widthFix' bindtap='cancelPlate'></image>
  </view>
  <view class='login_input  border-color-EFF1F4' style='padding-bottom:40rpx;'>
    <input disabled='true' value='{{ licensePlateNumber }}'></input>
    <view bindtap='getFocus' class='codeView to-relative' style='margin:0 32rpx'>
      <view class='codeTab {{licensePlateNumberList.length>0?"codeTabFocus":""}}'>{{licensePlateNumberList[0]}}</view>
      <view class='codeTab {{licensePlateNumberList.length>1?"codeTabFocus":""}}'>{{licensePlateNumberList[1]}}</view>
      <view class='codeTab {{licensePlateNumberList.length>2?"codeTabFocus":""}}'>{{licensePlateNumberList[2]}}</view>
      <view class='codeTab {{licensePlateNumberList.length>3?"codeTabFocus":""}}'>{{licensePlateNumberList[3]}}</view>
      <view class='codeTab {{licensePlateNumberList.length>4?"codeTabFocus":""}}'>{{licensePlateNumberList[4]}}</view>
      <view class='codeTab {{licensePlateNumberList.length>5?"codeTabFocus":""}}'>{{licensePlateNumberList[5]}}</view>
      <view class=' codeTab {{licensePlateNumberList.length>6?"codeTabFocus":""}}'>{{licensePlateNumberList[6]}}
      </view>
      <view class=' codeTab {{licensePlateNumberList.length>7?"codeTabFocus":""}}'>{{licensePlateNumberList[7]}}
        <image src='/images/xinnengyuan-icon.png' style='width:68rpx;height:auto;right:-10rpx;top:-10rpx;position:absolute' mode='widthFix'></image>
      </view>
    </view>
  </view>
  <view class='container margin-top-lit-big box-sizing' hidden='{{licensePlate_provinces_Box}}'>
    <view wx:for='{{ plateList}}' bindtap='licensePlate_provinces' data-id='{{ index }}' data-licensePlateProvinces='{{item}}' wx:key='index' class='box-sizing palteClass'>{{ item }}</view>
    <i wx:for='{{plateList.length-1 }}' wx:key='index'></i>
    <view class='to-absolute to-flex' style='right:32rpx;bottom:46rpx;'>
      <view class='dele-icon' bindtap="licensePlate_delete">
        <image src='/images/dele-icon.png' style='width:40rpx;height:auto;' mode='widthFix'></image>
      </view>
      <view class='confirm-btn' bindtap="confirmBtn">
        完成
      </view>
    </view>
  </view>
  <view class='container margin-top-lit-big box-sizing' hidden='{{licensePlate_letter_Box}}'>
    <block wx:if='{{ licensePlate_digital_Box }}'>
      <view wx:for='{{ licensePlate_digital}}' class='box-sizing palteClass' style='color:#ccc;border-color:#ccc'>{{ item }}</view>
    </block>
    <block wx:else>
      <view wx:for='{{ licensePlate_digital}}' bindtap='licensePlate_digital' data-id='{{ index }}' data-licensePlateProvinces='{{item}}' wx:key='index' class='box-sizing palteClass'>{{ item }}</view>
    </block>
    <view wx:for='{{ licensePlate_letter}}' bindtap='licensePlate_letter' data-id='{{ index }}' data-licensePlateProvinces='{{item}}' wx:key='index' class='box-sizing palteClass'>{{ item }}</view>
    <i wx:for='{{plateList.length-1 }}' wx:key='index'></i>
    <view class='to-absolute to-flex' style='right:32rpx;bottom:46rpx;'>
      <view class='dele-icon' bindtap="licensePlate_delete">
        <image src='/images/dele-icon.png' style='width:40rpx;height:auto;' mode='widthFix'></image>
      </view>
      <view class='confirm-btn' bindtap="confirmBtn">
        完成
      </view>
    </view>
  </view>
</view>

对应的wxss

/* 车牌号输入框的样式 */

 .plateList {
  padding: 32rpx 0rpx;
  position: fixed;
  bottom: 0;
  background: #fff;
  width: 100%;
  z-index: 100
}

.palteClass {
  border: 0.5rpx solid #c5c9d2;
 width: 60rpx;
 height: 84rpx;
 line-height: 84rpx;
 text-align: center;
  margin-right: 6rpx;
  margin-bottom: 20rpx;
  border-radius: 10rpx;
  color: #424752;
  font-size: 40rpx;
}
.container > i {
    width: 60rpx;
}
.car-number-wrapper{
  padding: 40rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
 width: 686rpx;
 margin-left: 32rpx;
}
.container{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 32rpx;
}
/* 使用伪元素辅助左对齐 */
.container::after {
    content: '';
    flex: auto;    /* 或者flex: 1 */
}
.single-number{
 height: 88rpx;
line-height: 88rpx;
text-align: center;
width: 78rpx;
  border-radius: 12rpx;
  border: 2rpx solid #C5C9D2;
  margin-right: 8rpx;
}
.dele-icon{
  width: 100rpx;
  height: 84rpx;
  line-height: 84rpx;
margin-right: 10rpx;
background: #ADB4BD;
border-radius: 12rpx;
text-align: center
}
.confirm-btn{
  text-align: center;
  background: #00C1C1;
  color: #fff;
    width: 140rpx;
  height: 84rpx;
  line-height: 84rpx;
  border-radius: 12rpx;
}

.login_input {
  display: flex;
  align-items: center;
  padding: 15rpx 0;
  border-bottom: 0.5rpx solid #c5c9d2;
}

.login_input .input_text {
  font-size: 30rpx;
  color: #c5c9d2;
  margin-top: 7rpx;
}

.login_input input {
  font-size: 30rpx;
  font-weight: 500;
  height: 40rpx;
  /* width: 100%; */
  width: 0%;
}

.codeView {
  width: 100%;
  height: 68rpx;
  display: flex;
  white-space: nowrap;
  align-items: center;
  justify-content: space-between
}

.codeTab {
  margin-right: 7rpx;
  width: 64rpx;
  height: 68rpx;
  line-height: 68rpx;
  border-radius: 12rpx;
  text-align: center;
  border: 1rpx solid #c5c9d2;
}

.codeTabFocus {
  border: 1rpx solid #1566fe;
  color: #1566fe;
}

.noBorder {
  border: none;
}

对应的js

data:{
      licensePlateShowHidden: true,
    licensePlate_provinces_Box: true,
    licensePlate_letter_Box: true,
    licensePlate_digital_Box: true,
    licensePlateNumber:'',
    plateList: [
      "京", "沪", "浙", "苏", "粤", "鲁",
      "晋", "冀", "豫", "川", "渝", "辽",
      "吉", "黑", "皖", "鄂", "津", "贵",
      "云", "桂", "琼", "青", "新", "藏",
      "蒙", "宁", "甘", "陕", "闽", "赣",
      "湘"
    ],
    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: [
      "1", "2", "3",
      "4", "5", "6",
      "7", "8", "9",
      "0"
    ],
    codeFocus: false, //input焦点
},
  // 显示模拟键盘
  licensePlateNumber: function () {
    var that = this;
    var licensePlateNumber = this.data.licensePlateNumber;
    var licensePlateNumberLen = licensePlateNumber.length;
    console.log(licensePlateNumber, licensePlateNumberLen)
    if (licensePlateNumberLen == 0) {
      this.setData({
        licensePlateShowHidden: false,
        licensePlate_provinces_Box: false,
      })
    } else if (licensePlateNumberLen == 1) {
      this.setData({
        licensePlateShowHidden: false,
        licensePlate_letter_Box: false,
      })
    } else {
      this.setData({
        licensePlateShowHidden: false,
        licensePlate_digital_Box: false,
      })
    }
    this.setData({
      plateListFlag:true
    })

  },
  // 点击获取省份
  licensePlate_provinces: function (e) {
    this.setData({
      licensePlateNumber: e.target.dataset.licenseplateprovinces,
      licensePlateNumberList: [e.target.dataset.licenseplateprovinces],
      licensePlate_letter_Box: false,
      licensePlate_digital_Box: true,
      licensePlate_provinces_Box:true
    })
    console.log(e.target.dataset.licenseplateprovinces)
    console.log(this.data.licensePlateNumberLists)
  },

  // 点击获取字母
  licensePlate_letter: function (e) {
    var licensePlateNumber = this.data.licensePlateNumber;
    var licensePlateNumberLen = licensePlateNumber.length;
    var arr = licensePlateNumber + e.target.dataset.licenseplateprovinces
    if (licensePlateNumberLen != 8) {
      this.setData({
        licensePlateNumber: licensePlateNumber + e.target.dataset.licenseplateprovinces,
        licensePlateNumberList: arr.split('')
      })
      console.log(e.target.dataset.licenseplateprovinces)
      console.log(this.data.licensePlateNumberList)
    } else {
      wx.showToast({
        title: '车牌号码最多不能超过8位',
        icon: 'none',
        duration: 1500,
      })
    }
    this.setData({
      licensePlate_digital_Box:false
    })
  },

  // 点击获取数字
  licensePlate_digital: function (e) {
    var licensePlateNumber = this.data.licensePlateNumber;
    var licensePlateNumberLen = licensePlateNumber.length;
    var arr2 = licensePlateNumber + e.target.dataset.licenseplateprovinces
    if (licensePlateNumberLen != 8) {
      this.setData({
        licensePlateNumber: licensePlateNumber + e.target.dataset.licenseplateprovinces,
        licensePlateNumberList: arr2.split(''),
      })
      console.log(e.target.dataset.licenseplateprovinces)
    } else {
      wx.showToast({
        title: '车牌号码最多不能超过8位',
        icon: 'none',
        duration: 1500,
      })
    }
  },
  cancelPlate:function(){
   this.setData({
     licensePlateNumber: '',
     licensePlateNumberList:[],
     plateListFlag:false
   })
  },
  confirmBtn: function () {
    var licensePlateNumber = this.data.licensePlateNumber
    if (licensePlateNumber){
      if(licensePlateNumber.length<7){
        wx.showToast({
          title: '车牌号码不能低于7位',
          icon: 'none',
          duration: 1500,
        })
      }else{
        console.log(licensePlateNumber.split(''))
        this.setData({
          plateListFlag: false,
          codeList: licensePlateNumber.split('')
        })
      }
    }else{
      console.log(licensePlateNumber)
    }
  },

  // 删除
  licensePlate_delete: function (e) {
    var licensePlateNumber = this.data.licensePlateNumber;
    var licensePlateNumberLen = licensePlateNumber.length;
    var licensePlateNumberDelete = licensePlateNumber.split('');
    var newLicensePlateNumber = licensePlateNumberDelete.join('').slice(0, -1)
    var newLicensePlateNumber1 = licensePlateNumberDelete.join('').slice(0, -1)
    if (licensePlateNumberDelete.slice(0, -1).length == 1) {
      this.setData({
        licensePlate_provinces_Box: true,
        licensePlate_letter_Box: false,
        licensePlate_digital_Box: true,
      })
    } else if (licensePlateNumberLen == 0 || licensePlateNumber == '' || licensePlateNumberDelete.slice(0, -1).length == 0) {
      this.setData({
        licensePlate_provinces_Box: false,
        licensePlate_letter_Box: true,
        licensePlate_digital_Box: true,
      })
    }
    this.setData({
      licensePlateNumber: newLicensePlateNumber,
      licensePlateNumberList: newLicensePlateNumber1,
    })
  },
weixin_43831302
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序车牌键盘录入demo
10-24
微信小程序车牌键盘录入demo，亲测可用，自定义键盘，符合车牌录入方式。此demo中包含整个页面，如有问题，请留言
小程序自定义键盘车牌号输入
weixin_40793759的博客
11-18 1282
page { background: rgba(248, 248, 248, 1); display: flex; flex-direction: column; justify-content: flex-start; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC"...
小程序 车牌输入
lh95lbw的博客
11-16 807
小程序 组件 车牌输入
在线合成车牌照片【模拟车牌，用于车牌识别项目测试】
热门推荐
lzl640的博客
06-16 10万+
在线合成车牌照片，用于车牌识别项目测试
微信小程序-虚拟车牌输入键盘组件vehicleKeyboard-master.zip
09-25
微信小程序-虚拟车牌输入键盘组件vehicleKeyboard-master.zip
小程序车牌号输入组件 车牌号键盘 兼容新能源号牌
12-02
微信小程序车牌号输入组件，车牌号键盘，兼容新能源号牌
微信小程序车牌键盘
03-29
公司要做一个停车场微信小程序，支持临时车预支付以及支付记录查询等功能,其中涉及车牌输入的功能，为了提升用户体验，避免繁琐的输入，决定自己写一个键盘。 效果图如下 省份简写键盘如下: (此图片来源于网络，如有...
微信小程序车牌号码模拟键盘输入功能的实现代码
10-17
主要介绍了微信小程序车牌号码模拟键盘输入功能的实现代码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
Android 车牌号输入自定义键盘demo
04-12
这个是Android开发自定义键盘输入车牌号的demo
【微信小程序源码】车牌号输入、地图标注功能demo
02-12
内容概要：demo包括车牌号输入功能、地图上标注用户头像功能。 适合人群：需要开发车牌号输入、地图标注的老铁可参考此demo。 能学到什么：怎么在地图上标注用户头像、设计完好的车牌输入功能（包括新能源车） ...
微信小程序车牌输入法
07-25
微信小程序车牌输入法，支持传统车牌和新能源车牌，封装为component
微信小程序 自定义车牌键盘测试demo
12-15
微信小程序 自定义车牌键盘 测试demo
微信小程序车牌号输入器（可支持新能源），打开即可用，中国人不骗中国人
02-15
资源中是完整的一套小程序代码，代码直接用微信开发者工具导入后，编译即可运行。其中的内容是微信小程序的车牌号输入器，可支持常规的7位牌照和新能源的8位牌照。源码完全使用原生代码开发，方便支持各位亲二次开发，希望能够帮到大家。
小汽车选号软件
04-18
2009年开始，全国各地的车管所纷纷开通了网上自选自编车牌的服务，此举大大地方便了各位车主朋友们为自己爱车选取车牌号，很多朋友也通过选号系统选到了自己心仪的车牌号码。 车选号
上海车牌竞拍模拟软件
04-19
刚才帮朋友竞拍上海车牌，弄了一个模拟软件，有需要的可以下载用用，模拟竞拍过程，很实用的哦
模拟选号车牌选号器_不用找黄牛！车牌靓号自己挑
weixin_39653764的博客
12-02 3万+
这篇文章发出来可能会断了一部分人的财路，不过好多小白其实都不知道，车牌号其实是可以自己挑的，而且机会不止一次！有的黄牛所谓的自己有门路，可以帮你选到好号，其实就是利用信息的不对称，用你的权益办你的事然后赚你的钱，反正我觉得这钱花的亏。今天整理一份攻略，可能有的人知道，但是希望能够帮助更多不知道的人省下这一笔冤枉钱。每个人都有3轮共计150个号码的选择机会，总会选到1个心仪的车牌的！接下来，跟着我一...
模拟选号车牌选号器_车牌号不满意？教你免费换靓号
weixin_39603622的博客
12-06 9702
靓号直入主题，废话不多说！ 随着汽车保有量不断增加，车牌靓号越来越少，现在的车牌一般都是带两个字母，特别是一二线大城市。我前段时间在武汉选中一个顺子号，运气还不错！事情起因是武汉军运会全面限行外地车牌，导致上班非常不方便，本来开车只要一个小时，坐地铁转车要花将近三个小时，所以只能把车牌迁入武汉，也为了以后打算，武汉估计这两三年也会限行的 异地车牌转入只要花费50多元，资料齐全办理顺利的话最多两天就...
微信小程序模拟车牌号键盘
weixin_43990106的博客
05-15 1826
微信小程序模拟车牌号键盘 效果图 中文键盘 英文数字键盘 项目地址:https://github.com/ushars/keyboard
支付宝小程序自定义键盘-车牌号键盘
Jeman_Yao的博客
11-06 1516
支付宝小程序自定义键盘-车牌号键盘小程序原生写法手写自定义键盘，订制车牌号输入键盘新的改变合理的创建标题，有助于目录的生成插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 小程序原...
小程序车牌号键盘输入组件
最新发布
07-28
根据提供的引用内容，我没有找到与小程序车牌号键盘输入组件相关的信息。可能需要更多的上下文或者其他引用内容来提供更准确的答案。 #### 引用[.reference_title] - *1* *2* *3* [微信小程序组件（车牌号输入，支付...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值