微信小程序使用车牌号输入法

最新推荐文章于 2024-07-03 16:45:21 发布

一只叮code的小蚊子

最新推荐文章于 2024-07-03 16:45:21 发布

阅读量2.4k

点赞数 3

分类专栏：微信小程序文章标签：微信小程序车牌车牌号输入法正则匹配车牌号

本文链接：https://blog.csdn.net/zjw222/article/details/99730215

版权

本文介绍了如何在微信小程序中创建车牌号输入法。通过展示效果图、组件代码（包括WXML、CSS和JS）以及父组件的引入方法，详细阐述了利用transform实现键盘上拉效果，以及处理键盘外点击收起键盘的逻辑。文章讨论了使用catch事件阻止冒泡的考量，并提供了最终的父组件代码片段。

摘要由CSDN通过智能技术生成

在做小程序时，做了一个关于车的项目，然后需要添加车辆信息、添加车牌号，使用车牌键盘输入，当时我把这个需求给砍了，然后在添加车辆信息时，老大看到数据库里我乱填的车牌号，又让我把他加上了^o^

1.效果图

2.相关代码

使用组件形式实现键盘输入

组件代码index.wxml

<view class="carPlate" wx:if="{
  {show}}">
  <block wx:if="{
  {type==1}}">
    <view class="wordList">
      <view class="wordItem" wx:for="{
  {cityKeyword1}}" wx:key="{
  {item}}" bindtap="handleClick" data-type="1" data-item="{
  {item}}">{
  {item}}</view>
    </view>
    <view class="wordList">
      <view class="wordItem" wx:for="{
  {cityKeyword2}}" wx:key="{
  {item}}" bindtap="handleClick" data-type="1" data-item="{
  {item}}">{
  {item}}</view>
    </view>
    <view class="wordList">
      <view class="wordItem" wx:for="{
  {cityKeyword3}}" wx:key="{
  {item}}" bindtap="handleClick" data-type="1" data-item="{
  {item}}">{
  {item}}</view>
    </view>
    <view class="wordList">
      <view class="wordItem" wx:for="{
  {cityKeyword4}}" wx:key="{
  {item}}" bindtap="handleCli