框式验证码的实现

最近有一个需求就是要实现框式验证码，老板说这个效果好。就4个框，只能输入数字，输入一个自动跳转到下一个，所以俺就码出来了（老实说参考了网上的）
最后呈现的效果如下：

 

.wxml:

<view class="wx-page-content">
  <view class="page-title">输入验证码</view>
  <view class="page-tises"> 已发送4位验证码到<span>+86 {{phone}}</span></view>
  <view class="verificationCode">
    <input type="number" maxlength="4" bindinput="inputValue" focus />
    <view class="{{veCode[0] ? 'activeView' : 0}}">{{veCode[0]}}</view>
    <view class="{{veCode[1] ? 'activeView' : 0}}">{{veCode[1]}}</view>
    <view class="{{veCode[2] ? 'activeView' : 0}}">{{veCode[2]}}</view>
    <view class="{{veCode[3] ? 'activeView' : 0}}">{{veCode[3]}}</view>
  </view>
  <view class="lodingBtn {{veCode.length == 4 ? 'trueLoding' : ''}}">立即登录</view>
  <view class="againTime" wx:if="{{time > 0 }}">重新获取({{time}})</view>
  <view class="againTimeBtn" wx:else bindtap="againTimeBtn">重新获取</view>
</view>

js和其他代码打包下载：

微信小程序不错的验证码输入框源码，代码片段_前端开发_天下网吧论坛 - Powered by Discuz!
https://bbs.txwb.com/thread-2083453-1.html