好资源导航 » 文章资讯 » 小程序实现密码输入框

小程序实现密码输入框

2023-07-11 17:20:03 80

本文实例为大家分享了小程序实现密码输入框的具体代码，供大家参考，具体内容如下

小程序密码输入框

wxml

请设置支付密码并妥善保管



=index+1?Value[index]:''}}"disabledpassword='{{ispassword}}'catchtap='Tap'>




下一步

wxss

/*pages/mima/mima.wxss*/
.Toptitle{
text-align:center;
margin:60rpxauto46rpx;
font-size:26rpx;
}
.content{
width:660rpx;
padding:045rpx;
display:flex;
justify-content:space-around;
align-items:center;
margin-top:100rpx;
}
.iptbox{
width:110rpx;
height:96rpx;
border:1rpxsolid#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;
}

Page({
data:{
Length:6,//输入框个数
isFocus:true,//聚焦
Value:"",//输入的内容
ispassword:true,//是否密文显示true为密文，false为明文。
disabled:true,
},
Focus(e){
varthat=this;
console.log(e.detail.value);
varinputValue=e.detail.value;
varilen=inputValue.length;
if(ilen==6){
that.setData({
disabled:false,
})
}else{
that.setData({
disabled:true,
})
}
that.setData({
Value:inputValue,
})
},
Tap(){
varthat=this;
that.setData({
isFocus:true,
})
},
formSubmit(e){
console.log(e.detail.value.password);
},

onLoad:function(options){

},
onShow:function(){

},
})

以上仅供参考，主要方便自己学习！

为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

小程序实现密码输入框

热门推荐

随机推荐