在做小程序过程中做一个6位验证码输入框，本以为很简单，但是在写的时候遇到各种各样的阻力，在网上查阅资料也寥寥无几，后来经过一番思考，终于敲定下来本人最满意的方案，特意发出来让大家参考一下，希望能帮到大家！
一、效果图如下：
二、代码部分
wxml：- form bindsubmit="formSubmit"
- view class='content'
- block wx:for="{{Length}}" wx:key="item"
- input class='iptbox' value="{{Value.length=index+1?Value[index]:''}}" disabled password='{{ispassword}}' catchtap='Tap'/input
- /block
- /view
- input name="password" password="{{true}}" class='ipt' maxlength="{{Length}}" focus="{{isFocus}}" bindinput="Focus"/input
- view
- button class="btn-area" formType="submit"Submit/button
- /view
- /form
js:
[javascript] view plain copy- Page({
- /**
- * 页面的初始数据
- */
- data: {
- Length:6, //输入框个数
- isFocus:true, //聚焦
- Value:"", //输入的内容
- ispassword:true, //是否密文显示 true为密文， false为明文。
- },
- Focus(e){
- var that = this;
- console.log(e.detail.value);
- var inputValue = e.detail.value;
- that.setData({
- Value:inputValue,
- })
- },
- Tap(){
- var that = this;
- that.setData({
- isFocus:true,
- })
