小程序开发日志-4、6位验证码输入框制作

下面来为大家讲讲在小程序上怎么用做一组6位验证码输入框。

先看看效果图：

 

 

 

要做到上面的效果并不难，先说说思路：

首先我们需要做两排输入框，一排用于获取焦点，一排用于填充。

 

 

 

 从上面的抽象的图画可以看出，单点击一排输入框的时候，也就是获取到了焦点，输入数字，将输入的内容分别拆分成一个个字符填充到第二排输入框中。

接下来要做的是将第一排输入框隐藏，并将输入的内容依次填充到第二排的6个输入框中。

一、如何将两排输入框合并？

我们只需要给第一排文本框设置宽高为0就可以了，这样整个输入框就被隐藏起来了。然后将第二排的6个文本框设置成不可输入（disabled）。

看一下标签文件：

<!--
  输入验证码
-->
<view class="insert-code">
  <view>
    <view class="insert-title">请输入验证码</view>
    <view class="insert-tips">验证码已发送至{{phoneNum}}</view>
  </view>
  <view>
    <view class="v-code flex-content">
        <block wx:for="{{6}}" wx:key="item">
            <input data-code="v" type="number" disabled catchtap="tapFn"></input>
        </block>
    </view>
    <input type="number" class="ipt" maxlength="6" focus="{{isVFocus}}" bindinput="showVCode"></input>
</view>

再看一下css文件：

.insert-code{
  padding: 48rpx;
}
.v-code{
  margin-top: 100rpx;
}
.insert-title{
  font-size: 36rpx;
  color: #000000;
  font-weight: bold;
}
.insert-tips{
  font-size: 24rpx;
  color: #959191;
  margin-top: 20rpx;
}
.v-code input{
  width: 75rpx;
  height: 72rpx;
  margin-right: 30rpx;
  padding-bottom: 8rpx;
  border: 2rpx solid #cccccd;
  text-align: center;
  color: #333333;
  font-size: 38rpx;
  border-radius: 10rpx;
}
.flex-content{
  display: flex;
  align-items: center;
}
.is-input{
  border-color: #079aff !important;
}
.ipt{
  height: 0;
  width: 0;
}
.c-blue{
  color: #079aff;
}
.again-tip{
  font-size: 28rpx;
  color: #959191;
}
.next-btn{
  margin-top: 80rpx;
}

二、如何将输入的内容显示出来

给隐藏的输入框添加监听输入事件（bindinput），将输入的字符循环遍历到第二排文本框中，这样我们就可以每输入一个字符，然后就渲染到6个文本框中相应的位置。

<!--
  输入验证码
-->
<view class="insert-code">
  <view>
    <view class="insert-title">请输入验证码</view>
    <view class="insert-tips">验证码已发送至{{phoneNum}}</view>
  </view>
  <view>
    <view class="v-code flex-content">
        <block wx:for="{{6}}" wx:key="item">
            <input data-code="v" class="{{vCodeValue.length === index && isVFocus ? 'is-input' : ''}}" type="number" value="{{vCodeValue.length>=index+1 ? vCodeValue[index] : ''}}" disabled catchtap="tapFn"></input>
        </block>
    </view>
    <input type="number" class="ipt" maxlength="6" focus="{{isVFocus}}" bindinput="showVCode"></input>
</view>

在JS代码中的监听事件：

import request from '../../utils/http';
import utils from '../../utils/utils';
// pages/forget-psd/insert-code.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    vCodeValue: '',
    isVFocus: true,
    phoneNum: '',//手机号码
  },
  showVCode: function(e){
    const that = this;
    that.setData({
      vCodeValue: e.detail.value,
    });
  },
  tapFn(e){
    const that = this;
    that.setData({
      isVFocus: true,
    });
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },
  
})

好了，这期内容先讲到这里。下期再见！