微信小程序如何实现密码显示与隐藏的睁眼闭眼功能

这篇“微信小程序如何实现密码显示与隐藏的睁眼闭眼功能”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“微信小程序如何实现密码显示与隐藏的睁眼闭眼功能”文章吧。

默认密码隐藏起来（显示为点），后面的图标是闭眼；用户点击图标后，图标变成睁眼，同时把密码明文显示出来；如此循环

最初实现方案

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,    })  },

这样的代码在微信开发者工具测试是没问题的。

当上传作为体验版，在手机上测试时发现问题：

安卓手机点一轮后失效了（点一次密码可见，再点一次密码不可见，再点只是图标在切换，密码一直是不可见）

苹果手机第一次点击还会把密码框上的内容清空了

===最终网上找到解决方法，就是不用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,    })  },

以上就是关于“微信小程序如何实现密码显示与隐藏的睁眼闭眼功能”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网精选频道。