小程序实践 01 - 验证码输入框

验证码输入框

实现效果：

输入数字自动跳到下一个input。

 

实现代码：

wxml代码：

<form>
    <view class='ipt_box'>
      <input 
      type='number' wx:for="{{inputLen}}" wx:key="{{index}}" 
      disabled bindtap='onFocus'
      value="{{iptValue.length>=index+1?iptValue[index]:''}}"
      />
    </view>
  <input 
  name="password" password="{{true}}" 
  class='hidden_ipt' maxlength="{{inputLen}}" 
  focus="{{isFocus}}" bindinput="setValue"
  ></input>
</form>

 wxss代码：

form{
  display: flex;
  justify-content: space-around;
  width:100%;
}
form input{
  height: 94rpx;
  width:94rpx;
  border:1px solid #cdcdcd;
  border-radius: 8rpx;
  display: inline-block;
  line-height: 94px;
  text-align: center;
  font-size: 48rpx;
  color:#323232;
  margin:0 8rpx;
}
form .hidden_ipt{
  height: 0rpx;
  width:0rpx;
  border:none;
  margin:0;
}

.scan_code{
  width:400rpx;
  height: 98rpx;
  display: block;
  margin:0 auto;
  line-height: 98rpx;
  font-size: 32rpx;
  color:#fff;
  background: #6f5bde;
  text-align: center;
  border-radius: 50rpx;
  margin-top:60rpx;
}

js代码：

Page({
  /**
   * 页面的初始数据
   */
  data: {
    inputLen:6,
    iptValue:"",
    isFocus:false,
  },

  onFocus:function(e){
    var that = this;
    that.setData({isFocus:true});
  },
  setValue:function(e){
    console.log(e.detail.value);
    var that = this;
    that.setData({ iptValue: e.detail.value });
  }

})

思路：

1.页面+样式准备

　　设置验证码输入框样式，设置disabled 使其不可输入。

　　另外设置一个输入框隐藏其样式，使其不可见。

　　设置隐藏输入框的最大长度。

2.点击验证码输入框，使隐藏输入框为聚焦状态

3.使用bindinput事件 监听输入状态 获取value。

4.将value赋值到验证码输入框中