小程序input密码显示隐藏

小程序中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. })