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

这篇具有很好参考价值的文章主要介绍了微信小程序实现输入车牌号码的功能（附效果图）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

实现需求：

实现用户输入车牌的功能

实现效果图：

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

微信小程序实现输入车牌号码的功能（附效果图）文章来源地址https://www.toymoban.com/news/detail-512446.html

实现步骤

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=