登录/ 注册
 找回密码
 立即注册
关闭

CSDN热搜

程序园 精品问答 技术交流 资源下载
返回列表 发新帖
首页 › 业界区 › 业界 ›微信小程序车牌键盘输入组件（支持单个删除更改，支持赋 ...

微信小程序车牌键盘输入组件（支持单个删除更改，支持赋值，支持新能源）

杜优瑗 2025-6-6 15:34:24
网上一搜一大堆类似但大多都相对简单，适用的场景并不多。多数也不支持赋值  不支持单个删除更改
我就借鉴了一下网上文章的思路，为了达到自己想要的效果做了相对应的更改。
效果图如下：
1.gif

直接上代码！

WXML代码：
点击查看代码
  1. <view wx:if="{{isSplit}}" >
  2.   <view wx:for="{{carNum}}" wx:key="id"  bind:tap='openKeyboard'>
  3.    
  4.     <text wx:if="{{ index === 2 }}" >.</text>
  5.    
  6.     <input wx:if="{{ index !== 7 }}" value="{{ item.value }}" data-index="{{index}}" disabled  bindinput="updateCarNum" />
  7.    
  8.     <input wx:else value="{{!showNewPower ? '+' : item.value }}" data-index="{{index}}" disabled  bindinput="updateCarNum" />
  9.   </view>
  10. </view>
  11. <view wx:else>
  12.   <input model:value="{{ vehicleNo }}" maxlength="8" placeholder="请输入车牌号" disabled="{{inputDisabled}}" focus="{{inputFocus}}" cursor="{{inputCursor}}"  bind:tap='openKeyboard' bindinput="updateVehicleNo" />
  13. </view>
  16. <view  hidden='{{!KeyboardState}}'>
  17.   <view >
  18.     <text >请输入车牌号</text>
  19.     <view ></view>
  20.     <view wx:if="{{!isSplit}}"  bindtap='switchKeyboard'>切换键盘</view>
  21.     <view  bindtap='closeKeyboard'>关闭</view>
  22.   </view>
  23.   
  24.   <view  hidden="{{ focusIndex !== 0 }}">
  25.     <view wx:for="{{provinces}}" wx:key="index" >
  26.       <view wx:for="{{item}}" wx:key="index" wx:for-item="char" data-val="{{char}}"  bindtap='bindChoose'>{{char}}</view>
  27.     </view>
  28.   </view>
  29.   
  30.   <view  hidden="{{focusIndex === 0}}">
  31.    
  32.     <view wx:for="{{numbers}}" wx:key="index" >
  33.       <view wx:for="{{item}}" wx:key="index" wx:for-item="char" data-val="{{char}}"  bindtap="{{ focusIndex !== 1 ? 'bindChoose' : '' }}">{{char}}</view>
  34.     </view>
  35.    
  36.     <view wx:for="{{letters}}" wx:key="index" >
  37.       <view wx:for="{{item}}" wx:key="index" wx:for-item="char" data-val="{{char}}"  bindtap="bindChoose">{{char}}</view>
  38.     </view>
  39.     <view  bindtap='bindDelChoose'>
  40.       <text >删除</text>
  41.     </view>
  42.   </view>
  43. </view>
复制代码
JS代码：
点击查看代码
  1. import { isEmpty } from '../../utils/util';
  2. const icon = 'none', duration = 3000
  4. const component = {
  5.   externalClasses: ['car-number-item'], // 提供给父组件外部设置样式
  6.   properties: {
  7.     vehicleNo: { type: String, value: undefined }, // 车牌号
  8.     isSplit: { type: Boolean, value: false } // 是否将车牌拆分为单个字符
  9.   },
  10.   data: {
  11.     provinces: [ // 省份键盘
  12.       ['京', '沪', '粤', '津', '冀', '晋', '蒙', '辽', '吉', '黑'],
  13.       ['苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘'],
  14.       ['桂', '琼', '渝', '川', '贵', '云', '藏'],
  15.       ['陕', '甘', '青', '宁', '新']
  16.     ],
  17.     numbers: [ // 数字键盘
  18.       ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']
  19.     ],
  20.     letters: [ // 字母键盘
  21.       ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K'],
  22.       ['L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V'],
  23.       ['W', 'X', 'Y', 'Z', '挂', '港', '澳', '学']
  24.     ],
  25.     specialChar: ['挂', '港', '澳', '学'], // 特殊字符
  26.     carNum: Array(8).fill({ value: undefined, focus: false }),
  27.     inputDisabled: true, // 虚拟键盘时禁用input。避免弹出系统键盘
  28.     inputFocus: false, // input操作时获取焦点（车牌不拆分单个字符，显示为input输入框时）
  29.     inputCursor: true, // input获取焦点弹出系统键盘时光标所在位置
  30.     focusIndex: 0, // 输入时焦点索引（车牌拆分为单个字符时）
  31.     showNewPower: false, // 是否新能源车牌
  32.     KeyboardState: false // 是否弹出虚拟键盘
  33.   },
  34.   attached() {
  35.     const v = this
  36.     const vehcles = v.data.vehicleNo.split('')
  37.     const carNum = v.data.carNum
  38.     let showNewPower = v.data.showNewPower
  39.     vehcles.forEach((m, i) => { carNum[i].value = m })
  40.     if (!isEmpty(carNum[7].value)) showNewPower = true
  41.     v.setData({ carNum, showNewPower })
  42.   },
  43.   /**
  44. * 组件的方法列表
  45. */
  46.   methods: {
  47.     // 车牌输入框点击展开车牌键盘
  48.     openKeyboard(e) {
  49.       const v = this
  50.       // 车牌不拆分为单个字符时 只弹出键盘
  51.       if (!v.data.isSplit) {
  52.         v.setData({ KeyboardState: true, focusIndex: v.data.vehicleNo.length, inputDisabled: true, inputFocus: false })
  53.         wx.hideKeyboard()
  54.       }
  55.       // 车牌拆分为单个字符
  56.       else {
  57.         const focusIndex = e.target.dataset.index
  58.         let carNum = v.data.carNum
  59.         let showNewPower = v.data.showNewPower
  61.         // 添加新能源尾数
  62.         if (focusIndex === 7) {
  63.           if (isEmpty(carNum[6].value)) return wx.showToast({ title: '为新能源车牌时，前几位车牌号不能为空', icon, duration })
  64.           if (v.data.specialChar.includes(carNum[6].value)) return wx.showToast({ title: `为新能源车牌时，第6位车牌号不能为'${carNum[6].value}'`, icon, duration })
  66.           showNewPower = true
  67.           v.setData({ showNewPower, KeyboardState: true })
  68.         }
  70.         // 当前点击获得焦点，其余失去焦点
  71.         carNum[focusIndex].focus = true
  72.         carNum = carNum.map((item, index) => {
  73.           return { ...item, focus: index === focusIndex ? item.focus : false }
  74.         })
  75.         // 点击索引不为新能源且新能源无值时
  76.         if (focusIndex !== 7 && isEmpty(carNum[7].value)) showNewPower = false
  78.         v.setData({ KeyboardState: true, focusIndex, carNum, showNewPower })
  79.       }
  80.     },
  81.     // 键盘选中点击设置
  82.     bindChoose(e) {
  83.       const v = this
  84.       const val = e.target.dataset.val
  85.       // 车牌不拆分为单个字符时
  86.       if (!v.data.isSplit) {
  87.         if (v.data.vehicleNo.length < 8) {
  88.           const vehicleNo = v.data.vehicleNo.concat(val)
  89.           v.setData({ vehicleNo, focusIndex: vehicleNo.length })
  90.           v.triggerEvent('change', { vehicleNo })
  91.         }
  92.       }
  93.       // 车牌拆分为单个字符
  94.       else {
  95.         const carNum = v.data.carNum
  96.         let focusIndex = v.data.focusIndex
  97.         if (focusIndex !== 6 && v.data.specialChar.includes(val)) return
  99.         // 当前选中车牌无值时更新为输入值
  100.         if (isEmpty(carNum[focusIndex].value)) {
  101.           carNum[focusIndex].value = val
  102.           carNum[focusIndex].focus = false
  104.           const validate = v.data.showNewPower ? 7 : 6
  105.           // 上一位车牌取消聚焦
  106.           if (focusIndex < validate) focusIndex++
  107.           carNum[focusIndex].focus = true
  109.           v.setData({ carNum, focusIndex })
  110.         }
  111.         const vehicleNo = carNum.map(m => m.value).join('')
  112.         v.triggerEvent('change', { vehicleNo })
  113.       }
  114.     },
  115.     // 删除
  116.     bindDelChoose() {
  117.       const v = this
  118.       // 车牌不拆分为单个字符时
  119.       if (!v.data.isSplit) {
  120.         const vehicleNo = v.data.vehicleNo.slice(0, -1)
  121.         v.setData({ vehicleNo, focusIndex: vehicleNo.length })
  122.         v.triggerEvent('change', { vehicleNo })
  123.       }
  124.       // 车牌拆分为单个字符
  125.       else {
  126.         const carNum = v.data.carNum
  127.         let focusIndex = v.data.focusIndex
  128.         let showNewPower = v.data.showNewPower
  130.         // 如果删除第6位后继续删除 则focusIndex后退一位并删除第5位车牌 依此类推
  131.         // 当删除至省份位车牌时，界面会控制取消删除按钮
  132.         if (isEmpty(carNum[focusIndex].value)) {
  133.           // 如果当前索引是新能源车牌
  134.           if (focusIndex == 7) showNewPower = false
  135.           focusIndex--
  136.           carNum[focusIndex].value = undefined
  137.           carNum[focusIndex].focus = true
  138.           // 后一位车牌取消聚焦
  139.           carNum[focusIndex + 1].focus = false
  140.         }
  141.         else {
  142.           carNum[v.data.focusIndex].value = undefined
  143.           carNum[v.data.focusIndex].focus = true
  144.         }
  146.         v.setData({ carNum, focusIndex, showNewPower })
  147.         const vehicleNo = carNum.map(m => m.value).join('')
  148.         v.triggerEvent('change', { vehicleNo })
  149.       }
  150.     },
  151.     // 切换键盘
  152.     switchKeyboard() {
  153.       this.setData({ KeyboardState: false, inputDisabled: false }, () => {
  154.         setTimeout(() => {
  155.           this.setData({ inputFocus: true, inputCursor: this.data.vehicleNo.length })
  156.         }, 50)
  157.       })
  158.     },
  159.     // 关闭虚拟键盘
  160.     closeKeyboard() {
  161.       const v = this
  162.       // 车牌不拆分为单个字符时
  163.       if (!v.data.isSplit) v.setData({ inputDisabled: true, inputFocus: false })
  164.       v.setData({ KeyboardState: false })
  165.     },
  166.     // 车牌不拆分为单个字符时，更新车牌
  167.     updateCarNum(e) {
  168.       const index = e.currentTarget.dataset.index
  169.       const value = e.detail.value
  170.       this.setData({ [`carNum[${index}].value`]: value })
  171.     },
  172.     // 系统键盘输入时
  173.     updateVehicleNo() { this.triggerEvent('change', { vehicleNo: this.data.vehicleNo }) }
  174.   }
  175. }
  177. Component(component);
复制代码
WXSS代码：
点击查看代码
  1. .com-vehicle {
  2.   white-space: nowrap;
  3. }
  5. /* 车牌号码 */
  6. .com-input {
  7.   height: 60rpx;
  8.   width: 465rpx;
  9.   background-color: rgba(242, 242, 242, 1);
  10.   box-sizing: border-box;
  11.   padding: 0 20rpx;
  12.   border-radius: 6rpx;
  13.   margin-left: 50rpx;
  14. }
  16. /* 拆分单个字符 车牌号码 */
  17. .com-carNumber-item {
  18.   width: 55rpx;
  19.   height: 60rpx;
  20.   font-size: 18px;
  21.   border: 2rpx solid #CCCCCC;
  22.   border-radius: 8rpx;
  23.   display: inline-block;
  24.   line-height: 30px;
  25.   margin: 0 2rpx;
  26.   vertical-align: middle;
  27.   caret-color: transparent;
  28. }
  30. .com-focus {
  31.   border: 3rpx solid #A8BFF3;
  32. }
  34. /* 新能源 */
  35. .com-carNumber-item-newpower {
  36.   border: 2rpx dashed #19e622;
  37.   background-color: #e1fde2;
  38.   color: #19e622;
  39.   font-size: 25px;
  40.   line-height: 45rpx;
  41. }
  43. /* 虚拟键盘 */
  44. .com-keyboard {
  45.   height: auto;
  46.   background: #d1d5d9;
  47.   position: fixed;
  48.   bottom: 0;
  49.   width: 100%;
  50.   left: 0;
  51.   padding-bottom: 30rpx;
  52. }
  54. .com-keyboard-item {
  55.   padding: 10rpx 0 5rpx 0;
  56.   position: relative;
  57.   display: block;
  58. }
  60. .com-vehicleTip {
  61.   flex: 1;
  62.   color: rgba(150, 179, 253, 1);
  63. }
  65. .com-separator {
  66.   width: 1px;
  67.   height: 50%;
  68.   background-color: #ccc;
  69.   margin: 0 10px;
  70. }
  72. .com-keyboardConfirm {
  73.   height: 70rpx;
  74.   background-color: #f7f7f7;
  75. }
  77. .com-keyboardConfirm_btn {
  78.   float: right;
  79.   line-height: 70rpx;
  80.   font-size: 15px;
  81.   margin-right: 30rpx;
  82.   color: #FFA500;
  83. }
  85. .com-keyboard-line {
  86.   margin: 0 auto;
  87.   text-align: center;
  88. }
  90. .com-carNumber .com-keyboard-line {
  91.   text-align: left;
  92.   margin-left: 5rpx;
  93. }
  95. .com-keyboard-btn {
  96.   font-size: 18px;
  97.   color: #333333;
  98.   background: #fff;
  99.   display: inline-block;
  100.   padding: 18rpx 0;
  101.   width: 63rpx;
  102.   text-align: center;
  103.   box-shadow: 0 2rpx 0 0 #999999;
  104.   border-radius: 10rpx;
  105.   margin: 5rpx 6rpx;
  106. }
  108. .com-keyboard-disabled-btn {
  109.   font-size: 18px;
  110.   color: #333333;
  111.   background: #cacaca;
  112.   display: inline-block;
  113.   padding: 18rpx 0;
  114.   width: 63rpx;
  115.   text-align: center;
  116.   box-shadow: 0 2rpx 0 0 #999999;
  117.   border-radius: 10rpx;
  118.   margin: 5rpx 6rpx;
  119. }
  121. .com-keyboard-del {
  122.   color: black;
  123.   background: #A7B0BC;
  124.   display: inline-block;
  125.   padding: 10rpx 25rpx;
  126.   box-shadow: 0 2rpx 0 0 #999999;
  127.   border-radius: 10rpx;
  128.   margin: 5rpx;
  129.   position: absolute;
  130.   bottom: 10rpx;
  131.   right: 12rpx;
  132. }
复制代码
公用样式代码（app.wxss）：
点击查看代码
  1. .text-center {
  2.   text-align: center;
  3. }
  5. .inline-block {
  6.   display: inline-block;
  7. }
  9. .ml-5 {
  10.   margin-left: 5rpx;
  11. }
  13. .mr-5 {
  14.   margin-right: 5;
  15. }
  17. .fs-40 {
  18.   font-size: 40rpx;
  19. }
  21. .bold {
  22.   font-weight: bold;
  23. }
  25. .flex-center {
  26.   display: flex;
  27.   align-items: center;
  28.   justify-content: center;
  29. }
复制代码
公用JS代码：
点击查看代码
  1. /**
  2. * 是否都是空数据（类型：字符串，数值，对象，数组，布尔）
  3. */
  4. const isEmpty = (...values) => {
  5.   const isEmptyFunc = (val) => {
  6.     switch (typeof val) {
  7.       case 'string':
  8.       case 'number': return !val // 数值0为空
  9.       case 'object':
  10.         // 数组
  11.         if (Array.isArray(val)) return val.length === 0
  12.         // null/对象
  13.         return val === null || Object.keys(val).length === 0
  14.       case 'boolean': return false // 布尔类型即非空
  15.       // undefined / function
  16.       default: return true
  17.     }
  18.   }
  19.   let result = true
  20.   values.forEach(m => { result = result && isEmptyFunc(m) })
  22.   return result
  23. }
  25. /**
  26. * 验证
  27. */
  28. const validate = {
  29.   /** 是车牌号 */
  30.   vehicle(value) {
  31.     let result = false
  32.     if (value && [7, 8].includes(value.length)) {
  33.       const express = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4,5}[A-Z0-9挂学警港澳]{1}$/
  34.       result = express.test(value)
  35.     }
  36.     return result
  37.   }
  38. }
复制代码
调用方式：
json文件：
点击查看代码
  1. {
  2.   "navigationBarTitleText": "车牌号输入",
  3.   "usingComponents": {
  4.     "vehicle-keyboard": "../../../../components/vehicle-keyboard/index"
  5.   }
  6. }
复制代码
js：
点击查看代码
  1. // 车牌输入组件完成
  2. confirmVehicle(e) { this.setData({ shipNo: e.detail.vheicleNo }) }
复制代码
wxml：
点击查看代码[code][/code]上面gif生成是用 Windows 系统 Win+Shift+S 将操作截图成视频，再去这个网站 https://www.aconvert.com/cn/video/mp4-to-gif/   将视频转成GIF
2.png

预览的时候把图片下载下来
录制gif的时候有个小bug，已被我修复。
两种模式 isSplit为true 车牌拆分成一个个小框显示，否则文本框显示同时可以切换系统键盘

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

使用道具 举报
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
发帖
杜优瑗
2025-6-6 15:34:24

0

粉丝关注

9

主题发布

板块介绍填写区域，请于后台编辑
微信扫一扫