
小程序中input的密码类型不是用type属性控制的,而且有独立的password属性来控制,当password为true时为密码输入类型,false为普通text类型,而直接控制password属性的值没法控制实时切换显示隐藏。
使用双input加上双向数据绑定来实现实时切换显示隐藏。代码如下:
**wxml:**
1. <!-- 密码框 -->
2. <!-- 隐藏 -->
3. <view wx:if="{{isPassWord}}">
4. <input name="password" password='true' value='{{pwd_val}}' bindblur="bindblur" placeholder='输入密码'></input>
5. <text bindtap='isShow' class='iconfont icon-htmal5icon08'></text>
6. </view>
7. <!-- 显示 -->
8. <view wx:if="{{!isPassWord}}" class='login_input login_password'>
9. <input name="password" value='{{pwd_val}}' bindblur="bindblur" placeholder='输入密码'></input>
10. <text bindtap='isShow' class='iconfont icon-htmal5icon09'></text>
11. </view>
**js:**
1. Page({
2.
3. /**
4. * 页面的初始数据
5. */
6. data: {
7. isPassWord: true, // 切换密码显示隐藏
8. pwd_val: '', // 密码值
9.
10. },
11. // 密码框失去焦点时
12. bindblur: function (e) {
13. this.setData({
14. pwd_val: e.detail.value
15. })
16. },
17. // 密码显示隐藏
18. isShow:function(){
19. this.setData({
20. isPassWord: !this.data.isPassWord
21. })
22. },
23. })