小程序格子输入框

密码输入框效果：

image.png

直接附代码了

<view class='password-input-box'>

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

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

.password-input-box{
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 100rpx;
}

.input{
  height: 100rpx;
  margin: 0 auto;
  border-radius: 10rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;   
  text-align: center;
  overflow: hidden;
  border: 1rpx solid #E1E1E1;
}

.password-input{  
  width: 0;  
  height: 0;
  box-sizing: border-box;
}  

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

.input-gz {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}

.input > .input-content{
  height: 100%;
  width: 110rpx;
  box-sizing: border-box;
  border-right: 1px solid #E1E1E1;
}

.input > .input-content:last-child {
   border-right: none;
}

// pages/agreement/agreement.js
Page({

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

  // 点击格子容器的时候，让隐藏的输入框获取焦点
  // getFocus() {
  //   this.setData({ focus: !this.data.focus })
  // },

  // 隐藏的输入框输入事件
  password_input(e) {
    this.setData({ Value: e.detail.value})
  },

  // 点击显示出来的输入框的时候，让隐藏的输入框获取焦点
  Tap() {
    this.setData({ isFocus: true })
  },

  


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})