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

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

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