隱藏密碼
顯示密碼
出現(xiàn)的問題:
ios端彬祖,登錄頁(yè)密碼顯示隱藏茁瘦,點(diǎn)擊顯示隱藏圖標(biāo)后密碼清除,然后再點(diǎn)擊用戶名储笑、密碼后甜熔,小程序閃退。安卓端突倍,點(diǎn)擊密碼顯示隱藏沒生效腔稀,把光標(biāo)放在密碼input框里去點(diǎn)擊圖標(biāo)時(shí),密碼才顯示出來羽历。
但是焊虏,開發(fā)者工具上測(cè)試一直都是沒有問題的。
問題的原因:
一般情況下窄陡,我們都認(rèn)為是<input> 中的type屬性控制著 password或者text 等 <input>屬性炕淮,但是!小程序就是有點(diǎn)特殊跳夭,它并不是由 type 來控制的涂圆,而是由 password屬性控制的,當(dāng)password = "true"的時(shí)候 币叹,是password類型润歉;當(dāng)password="false"的時(shí)候,默認(rèn)是text類型颈抚。
代碼:
// wxml
<form class="form-content">
<view class="form-account hairline-bottom">
<image src="../../../images/user-name.png" class="account-img"></image>
// model:value是小程序里簡(jiǎn)易雙向綁定
<input model:value="{{ userName }}" type='text' name="input" placeholder="請(qǐng)輸入用戶名" class="form-input" /></view>
<view class="form-password hairline-bottom">
<view class="form-psd">
<image src="../../../images/lock.png" class="account-img"></image>
// 主要是根據(jù) passwords 屬性來控制的
<input password='{{passWord}}' model:value="{{pwd_val}}" placeholder="請(qǐng)輸入密碼(6-20位)" maxlength="20" class="form-input" />
</view>
// 判斷當(dāng)前點(diǎn)擊圖標(biāo)后是顯示還是隱藏密碼
<image src='{{defaultType ? "../../../images/nosee.png" : "../../../images/see.png"}}' class="nosee-img" bindtap="onShowPad"></image>
</view>
</form>
// js
data:{
defaultType: true, // 默認(rèn)不顯示密碼
passWord: 'true', // 默認(rèn)為密碼是password類型
userName: '',
pwd_val: '',
}
// 是否顯示密碼
onShowPad:function(){
this.data.defaultType= !this.data.defaultType;
this.data.passWord = !this.data.passWord;
this.setData({
defaultType: this.data.defaultType,
passWord: this.data.passWord
})
}