小程序实现密码输入框
编程学习 2021-07-04 14:07www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了小程序实现密码输入框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了小程序实现密码输入框的具体代码，供大家参考，具体内容如下
小程序密码输入框
wxml
<view class="Toptitle">请设置支付密码并妥善保管</view>
<form bindsubmit="formSubmit">
<view class='content'>
<block wx:for="{{Length}}" wx:key="item">
<input class='iptbox' value="{{Value.length>=index+1?Value[index]:''}}" disabled password='{{ispassword}}' catchtap='Tap'></input>
</block>
</view>
<input name="password" password="{{true}}" class='ipt' maxlength="{{Length}}" focus="{{isFocus}}" bindinput="Focus"></input>
<view>
<button class="btn-area" type='primary' disabled='{{disabled}}' formType="primary">下一步</button>
</view>
</form>
wxss
/* pages/mima/mima.wxss */
.Toptitle{
text-align: center;
margin: 60rpx auto 46rpx;
font-size: 26rpx;
}
.content{
width: 660rpx;
padding:0 45rpx;
display: flex;
justify-content: space-around;
align-items: center;
margin-top: 100rpx;
}
.iptbox{
width: 110rpx;
height: 96rpx;
border:1rpx solid #ddd;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.ipt{
width: 0;
height: 0;
}
.btn-area{
width: 80%;
margin-top: 60rpx;
}
js
Page({
data: {
Length: 6, //输入框个数
isFocus: true, //聚焦
Value: "", //输入的内容
ispassword: true, //是否密文显示 true为密文， false为明文。
disabled:true,
},
Focus(e) {
var that = this;
console.log(e.detail.value);
var inputValue = e.detail.value;
var ilen = inputValue.length;
if(ilen == 6){
that.setData({
disabled: false,
})
}else{
that.setData({
disabled: true,
})
}
that.setData({
Value: inputValue,
})
},
Tap() {
var that = this;
that.setData({
isFocus: true,
})
},
formSubmit(e) {
console.log(e.detail.value.password);
},
onLoad: function (options) {
},
onShow: function () {
},
})
以上仅供参考，主要方便自己学习！
为大家推荐现在关注度比较高的微信小程序教程一篇：长沙网络推广为大家精心整理的，希望喜欢。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。