微信小程序实现密码显示与隐藏的睁眼闭眼功能
作者：A 风
这篇文章主要介绍了微信小程序实现密码显示与隐藏的睁眼闭眼功能，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
要实现的效果
默认密码隐藏起来（显示为点），后面的图标是闭眼；用户点击图标后，图标变成睁眼，同时把密码明文显示出来；如此循环
最初实现方案
js:
Page({
/**
* 页面的初始数据
*/
data: {
// 密码框type值
inputType:"password",
// 是否显示密码
show_pass:false,
...
}
...
})
wxml:
<text class="page-flex-password">设置密码</text>
<view class="page-flex-row3">
<input name="password" class="page-input2" placeholder-class="place-holder" placeholder="请输入您要设置的密码（6-12位）" type="{{inputType}}"></input>
<image class="password-icon" src="/images/register/yj_01.png" bindtap="seeTap" wx:if="{{show_pass}}"/>
<image class="password1-icon" src="/images/register/biyan.png" bindtap="seeTap" wx:else/>
</view>
用户点击图标时：
seeTap:function(){
var newType = this.data.inputType=='password'?'text':'password';
this.setData({
// 切换图标
show_pass:!that.data.show_pass,
// 切换表单type属性
inputType:newType,
})
},
这样的代码在微信开发者工具测试是没问题的。
当上传作为体验版，在手机上测试时发现问题：
1、安卓手机点一轮后失效了（点一次密码可见，再点一次密码不可见，再点只是图标在切换，密码一直是不可见）
2、苹果手机第一次点击还会把密码框上的内容清空了
===最终网上找到解决方法，就是不用type属性，改用password属性
Page({
/**
* 页面的初始数据
*/
data: {
//是否密码框
passwordType:true,
// 是否显示密码
show_pass:false,
...
}
...
})
<text class="page-flex-password">设置密码</text>
<view class="page-flex-row3">
<input name="password" class="page-input2" placeholder-class="place-holder" placeholder="请输入您要设置的密码（6-12位）" password='{{passwordType}}'></input>
<image class="password-icon" src="/images/register/yj_01.png" bindtap="seeTap" wx:if="{{show_pass}}"/>
<image class="password1-icon" src="/images/register/biyan.png" bindtap="seeTap" wx:else/>
</view>
seeTap:function(){
that.setData({
// 切换图标
show_pass:!that.data.show_pass,
// 切换是否密码框
passwordType:!that.data.passwordType,
})
},
到此这篇关于微信小程序实现密码显示与隐藏的睁眼闭眼功能的文章就介绍到这了,更多相关小程序密码显示与隐藏内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！