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/////修改jsdata: { 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 }) },这便是小程序控制密码可视与不可视,看来要多多多文档,并敢于尝试吧。















