如何实现一个6位数的密码输入框
背景：
因为公司业务调整需要做用户支付这一块
开发者需要在小程序上实现一个简单的6位数密码输入框
[图片]
首先想下如何实现该效果：
1.使用input覆盖在框上面，设置letter-spacing达到数字之间间距的效果，实现时发现在input组件上使用letter-spacing无效果
2.循环六个view模拟的框，光标使用动画模拟，一个隐藏的input，点击view框时触发input的Focus属性弹起键盘，同时模拟的光标展示出来，输入值后，input的value长度发生变化，设置光标位置以及模拟的密码小黑圆点
好了，废话不多数，咱们直接上手。
wxml
[代码]<view class='container'>
<!-- 模拟输入框 -->
<view class='pay-box {{focusType ? "focus-border" : ""}}' bindtap="handleFocus" style='width: 604rpx;height: 98rpx'>
<block wx:for="{{boxList}}" wx:key="{{index}}">
<view class='password-box {{index === 0 ? "b-l-n":""}}'>
<view wx:if="{{(dataLength === item - 1)&& focusType}}" class="cursor"></view>
<view wx:if="{{dataLength >= item}}" class="input-black-dot"></view>
</view>
</block>
</view>
<!-- 隐藏input框 -->
<input value="{{input_value}}" focus="{{isFocus}}" maxlength="6" type="number" class='hidden-input' bindinput="handleSetData" bindfocus="handleUseFocus" bindblur="handleUseFocus" />
</view>
[代码]
wxss
[代码]/* 第一个格子输入框 */
.container .b-l-n {
border-left: none;
}
.pay-box {
margin: 0 auto;
display: flex;
flex-direction: row;
border-left: 1px solid #cfd4d3;
}
/* 支付密码框聚焦的时候 */
.focus-border {
border-color: #0c8;
}
/* 单个格式样式（聚焦的时候） */
.password-box {
flex: 1;
border: 1px solid #0c8;
margin-right: 10rpx;
display: flex;
align-items: center;
justify-content: center;
}
/* 模拟光标 */
.cursor {
width: 2rpx;
height: 36rpx;
background-color: #0c8;
animation: focus 1.2s infinite;
}
/* 光标动画 */
@keyframes focus {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
/* 模拟输入的password的黑点 */
.input-black-dot {
width: 20rpx;
height: 20rpx;
background-color: #000;
border-radius: 50%;
}
/* 输入框 */
.hidden-input {
margin-top: 200rpx;
position: relative;
}
[代码]
JS
[代码]Component({
data: {
//输入框聚焦状态
isFocus: false,
//输入框聚焦样式 是否自动获取焦点
focusType: true,
valueData: '', //输入的值
dataLength: '',
boxList: [1, 2, 3, 4, 5, 6]
},
// 组件属性
properties: {
},
// 组件方法
methods: {
// 获得焦点时
handleUseFocus() {
this.setData({
focusType: true
})
},
// 失去焦点时
handleUseBlur() {
this.setData({
focusType: false
})
},
// 点击6个框聚焦
handleFocus() {
this.setData({
isFocus: true
})
},
// 获取输入框的值
handleSetData(e) {
// 更新数据
this.setData({
dataLength: e.detail.value.length,
valueData: e.detail.value
})
// 当输入框的值等于6时（发起支付等...）
if (e.detail.value.length === 6) {
// 通知用户输入数字达到6位数可以发送接口校验密码是否正确
this.triggerEvent('initData', e.detail.value)
}
}
}
})
[代码]
实现方式很简单，有点小问题，还有一些后续准备做的优化点，等完善后上线后再来修改一波。
最后附上代码片段：
https://developers.weixin.qq.com/s/8CtRqJmT7W8k
