版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/ansheng02/article/details/83743848
2018年11月5日下午16:45修改:
经过在手机上多次真机测试,发现这个方法有问题,在电脑上没什么毛病。但在手机上,会出现点击眼睛的小图标不能够及时显示或者隐藏密码,特此对代码进行简化和修改。
<!--修改wxml-->
<image class='showImg' bindtap='showPassword' src="{{isPassword ? '/images/close.png' : '/images/open.png' }}"></image>
<input name="password" password='{{isPassword}}' placeholder="请输入新的登录密码" value='{{password}}'></input>
/////修改js
data: {
isPassword: true
},
//右侧是否可视的图标
showPassword: function(e) {
var isPassword = !this.data.isPassword;
this.setData({
isShow: false,
isPassword: isPassword
})
},
原文
微信官方对input的属性设置了有“password”,即
<input type="password"></input>
这样在对input输入框输入值的时候,是密码形式的小圆黑点。
但在大多数时候,出于用户体验的考虑,我们需要把密码设为“可见”与“不可见”两种。
这一点在实现上,主要利用了小程序input框的“text”、“password”两种属性。
具体代码如下:
<!--WXML部分-->
<image class='showImg' bindtap='showPassword' src="{{isShow ? '/images/open.png' : '/images/close.png'}}"></image>
<input type="{{show}}" placeholder="请输入新的登录密码" value='{{password}}' bindinput='getPassWord'></input>
//js部分
data: {
isShow: true, //运用三目运算法,对最右侧图片进行控制
show:"text" //初始化input框的类型为text
},
/////显示密码或者隐藏密码的图片控住函数
showPassword: function() {
if (this.data.isShow) { //如果this.data.isShow为true,则表示为密码小黑点
this.setData({
isShow:false,
show:"password"
})
} else {
this.setData({
isShow: true,
show: "text"
})
}
},
//密码输入检测
getPassWord: function(e) {
var password = e.detail.value;
this.setData({
password: password
})
},
这便是小程序控制密码可视与不可视,看来要多多多文档,并敢于尝试吧。