小程序input密码显示隐藏

原创 黄良钵  2018-02-28 11:41  阅读 784 次 评论 0 条

小程序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.     data: {
  6.       isPassWord: true// 切换密码显示隐藏
  7.       pwd_val: ''// 密码值
  8.     },
  9.     // 密码框失去焦点时
  10.     bindblur: function (e) {
  11.       this.setData({
  12.         pwd_val: e.detail.value
  13.       })
  14.     },
  15.     // 密码显示隐藏
  16.     isShow:function(){
  17.         this.setData({
  18.           isPassWord: !this.data.isPassWord
  19.         })
  20.     },
  21. })
关注我们:请关注一下我们的微信公众号:扫描二维码黄良钵博客的公众号,公众号:HLB_Blog
版权声明:本文为原创文章,版权归 黄良钵 所有,欢迎分享本文,转载请保留出处!

发表评论


表情