小程序填坑之路—input密码可见与不可见（已解决）

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/ansheng02/article/details/83743848

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>

/////修改js
data: {
    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
    })
  },

这便是小程序控制密码可视与不可视，看来要多多多文档，并敢于尝试吧。