下面来为大家讲讲在小程序上怎么用做一组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) { }, })
好了，这期内容先讲到这里。下期再见！
请发表评论