小程序input密码显示隐藏

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

黄良钵

博客站长,前端开发工程师

发表评论

电子邮件地址不会被公开。 必填项已用*标注

微信扫一扫

微信扫一扫

微信扫一扫,分享到朋友圈

小程序input密码显示隐藏
返回顶部
网站稳定运行 : {{ diffYears }}年 零 {{ diffDays }}天 {{ diffHours }} 小时 {{ diffMinutes }} 分钟 {{ diffSeconds }} 秒

显示

忘记密码?

显示

显示

获取验证码

Close