微信小程序实现输入车牌号码的功能（附效果图）

今天星期八

已于 2022-11-24 14:47:05 修改

阅读量1.1w

点赞数 1

分类专栏：小程序原生JS 文章标签：微信小程序前端小程序 js javascript

于 2022-10-06 15:16:17 首次发布

本文链接：https://blog.csdn.net/Missbelover/article/details/127183402

版权

实现需求：

实现用户输入车牌的功能

实现效果图：

可以输入 正常车牌以及新能源车牌

在这里插入图片描述

实现步骤

1 . `wxml` 文件

  <!-- 车牌号码输入框 -->
  <view class="carNumber" style="margin-top: 50rpx;">
    <view class="weui-cells__title"></view>
    <!-- 车牌号头两位 -->
    <view class="carNumber-items">
      <view class="carNumber-items-box" bindtap='openKeyboard'>
        <view class="carNumber-items-province carNumber-items-box-list">{
  {carnum[0] || ''}}</view>
        <view class="carNumber-items-En carNumber-items-box-list">{
  {carnum[1] || ''}}</view>
      </view>
      <!-- 常规 -->
      <view class="carNumber-item" bindtap='openKeyboard'>{
  {carnum[2] || ''}}</view>
      <view class="carNumber-item" bindtap='openKeyboard'>{
  {carnum[3] || ''}}</view>
      <view class="carNumber-item" bindtap='openKeyboard'>{
  {carnum[4] || ''}}</view>
      <view class="carNumber-item" bindtap='openKeyboard'>{
  {carnum[5] || ''}}</view>
      <view class="carNumber-item" bindtap='openKeyboard'>{
  {carnum[6] || ''}}</view>
      <!-- 新能源 -->
      <view class="carNumber-item {
    {showNewPower ? '': 'carNumber-item-newpower'}}">
        <view wx:if="{
    {!showNewPower}}" bindtap='showPowerBtn'>
          <view class="carNumber-newpower-add">+</view>
          <view>新能源</view>
        </view>
        <view wx:if="{
    {showNewPower}}" bindtap='openKeyboard'>
          {
  {carnum[7]}}
        </view>
      </view>
    </view>
  </view>
 
  <!-- 提交车牌 -->
  <button class="carNumberBtn" bindtap='submitNumber' style="background:  #DE5252;color:#fff;border-radius: 40rpx;" type="default">确定</button>
 
  <!-- 虚拟键盘 -->
  <view class="keyboard" hidden=