微信小程序> 小程序填坑之路—input密码可见与不可见(已解决)

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

浏览量:3285 时间: 来源:ansheng02

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

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

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎