微信小程序密码输入框

代码语言：javascript复制

<view class='box'>
    <view class='row' bindtap='inputFocus'>
        <view class="{{index == active ? 'active' : '' }}" wx:for="{{Length}}" wx:key="index">
            <input type="number" value="{{entryList.length>=index 1?entryList[index]:''}}" disabled></input>
        </view>
    </view>
    <input type="number" class='entry' maxlength="{{Length}}" focus="{{isFocus}}" bindinput="inputValue"></input>
</view>

代码语言：javascript复制

.row {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.row view {
  width: 80rpx;
  height: 80rpx;
  border: 1px solid #f5f5f5;
  border-radius: 5rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.row view input {
  width: 100%;
  height: 100%;
  text-align: center;
}

.active {
  border: 1px solid red !important;
}

.entry {
  width: 0;
  height: 0;
  opacity: 0;
}

代码语言：javascript复制

Page({
    data: {
        isFocus: true,
        Length: 6,
        entryList: "",
        active: 0,
    },

    inputFocus() {
        this.setData({
            isFocus: true
        })
    },

    inputValue(e) {
        var value = e.detail.value;
        var list= e.detail.value.split('')
        this.setData({
            entryList: value,
            active: list.length
        })
    },
})

微信小程序

0 人点赞