微信小程序密码表单,显示与隐藏密码

wxml:

     <input placeholder="设置登录密码" maxlength="11" bindinput="setPassInput" type="{{inputType}}"></input> <!-- 小眼睛图标 --> <image src="/images/nosee.png" bindtap="seeTap" wx:if="{{show_pass}}"></image> <image src="/images/see.png" bindtap="seeTap" wx:else></image>

js:

Page({ /** * 页面的初始数据 */ data: { // 密码 pass:‘‘, // 表单类型 inputType:"password", // 是否显示密码 show_pass:false, }, /** * 点击显示隐藏密码 */ seeTap:function(){ var that=this; that.setData({ // 切换图标 show_pass:!that.data.show_pass, // 切换表单type属性 inputType:that.data.inputType===‘password‘?‘text‘:‘password‘, }) }, /** * 设置密码表单事件 */ setPassInput:function(e){ var that=this; // 存储输入的密码 that.setData({ pass:e.detail.value, }) }, })

 

相关文章