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

发布时间:2023-02-25 11:38:27 作者:iii
来源:亿速云 阅读:168

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

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

最初实现方案

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

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

推荐阅读:
  1. 微信小程序中怎么使用GoEasy实现实时通讯
  2. SAP UI5和微信小程序框架里的全局变量是怎样的

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

微信小程序

上一篇:java日志LoggerFactory.getLogger怎么使用

下一篇:PHP如何计算字符串真正的宽度和高度像素

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》