• 当前标签:密码显示隐藏

程序开发 小程序input密码显示隐藏

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

2018-02-28 11:41:53 213 0 0
阅读详情
  • 1
前往