小程序实现密码交替显示隐藏的效果

最新推荐文章于 2025-08-06 13:01:16 发布

A 风

最新推荐文章于 2025-08-06 13:01:16 发布

阅读量438

点赞数 2

CC 4.0 BY-SA版权

分类专栏： web缓存 wx小程序 javascript 文章标签：小程序 javascript 开发语言

本文链接：https://blog.youkuaiyun.com/gxdzi/article/details/129182789

javascript 同时被 3 个专栏收录

92 篇文章

订阅专栏

web缓存

46 篇文章

订阅专栏

wx小程序

31 篇文章

订阅专栏

文章描述了一种在微信小程序中实现密码隐藏和显示功能的初始方案，使用type属性切换input的类型。然而，在实际的安卓和苹果手机上测试时，发现存在失效和清空密码的问题。最终，作者找到了一种替代方案，通过切换input的password属性来达到同样的效果，解决了上述问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要实现的效果

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

最初实现方案

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