微信小程序六位密码框的实现

项目中有需要提现输入的密码框，首先来看一下效果

• WXML

<view class='password-input-box' style='margin-top:200rpx;'>
  <view class='input' bindtap='getFocus'>
    <view wx:for="{{Length}}" wx:key="item" class='input-content'>
      <input value="{{Value.length>=index+1?Value[index]:''}}" 
      disabled password='{{ispassword}}' catchtap='Tap'></input>
    </view>
  </view>

  <input name="password" password="{{true}}" class='password-input' maxlength="{{Length}}" focus="{{isFocus}}"   bindinput="password_input"></input>
 
</view>

• JS

Page({
  /**
   * 页面的初始数据
   */
  data: {
    focus: false,
    Length: 6,        //输入框个数  
    isFocus: true,    //聚焦  
    Value: "",        //输入的内容  
    ispassword: false, //是否密文显示 true为密文， false为明文。
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  
  },
  password_input: function (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,
    })
  },

  getFocus: function () {
    this.setData({
      focus: !this.data.focus
    })
  },
})

• WXSS

.password-input-box{
  margin: auto;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1002;
  border-radius: 30rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 40rpx;
  box-sizing: border-box;
  height: 100rpx;
}

.input-content{
  display: flex;
  align-items: center;
  justify-content: center;
}

.input{
 height: 100rpx;
  width: 100%;
  border: 1px solid #BBB;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;   
 text-align: center;
}

.input>view:nth-child(6){
   border-right: none;
}

.input>view{
  height: 100%;
  width: 16.6%;
  border-right: 1px solid #BBB;
}

.password-input{  
  width: 0;  
  height: 0;  
}