小程序密码输入框 小程序实现密码输入框
JSN___不像码农的码农 人气:0想了解小程序实现密码输入框的相关内容吗，JSN___不像码农的码农在本文为您仔细讲解小程序密码输入框的相关知识和一些Code实例，欢迎阅读和指正，我们先划重点：小程序密码输入框,小程序密码输入,小程序输入框，下面大家一起来学习吧。
小程序密码输入框
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 () {
},
})
以上仅供参考，主要方便自己学习！
为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。
加载全部内容