小程序密码框的显示和隐藏

html页面

<!-- 表单内容 -->
  <view class="section">
    <!-- 输入账号 -->
    <input class='ccount' type="search" value='{{key}}' bindinput="bindKeyInput" placeholder="账号"/>
    <a  wx:if="{{key}}" bindtap="eliminate" class="iconfont icon-guanbi"></a>
    <!-- 输入密码 -->
    <view class="weui-cell">      
      <view class="weui-cell__bd">        
      <input password='{{isShowPassword}}' bindinput="bindPassInput" placeholder="密码" placeholder-class='placeholder_class'/> 
      <span wx:if="{{!password}}" class="forget">忘记密码？</span>
        <view class="weui-cell__ft get_qrcode" bindtap='toggleShowPassword'>  
          <a  wx:if="{{password}}" bindtap="eliminate" class="forget">      
            <view wx:if='{{isShowPassword}}' class='iconfont icon-yanjing-bi'></view>      
            <view wx:if='{{!isShowPassword}}' class='iconfont icon-iconset0207'></view>    
          </a>  
        </view> 
      </view>           
    </view>
  </view>
  <!-- 登陆按钮 -->
  <view class="btn-area">
    <button bindtap="bindViewTap">登陆</button>
  </view>
  <!-- 注册连接 -->
  <view class='foor'>
    <span class="gray">还没有账号？</span>
    <span class="register">去注册</span>
  </view>

css页面

/* 表单样式 */
.section{
  width: 90%;
  margin: 0 auto;
  position: relative;
}
/* 账号输入框样式 */
.section .ccount{
  height: 80rpx;
  line-height: 80rpx;
  margin: 20rpx 0;
  border-bottom: 1rpx solid #eee;
  padding-left:20rpx;
   
}
/* 显示清除按钮 */
.section a{
  position: absolute;
  right: 20rpx;
  top: 10rpx;
  z-index: 2;
}
/* 密码的输入使用 */
.section .weui-cell{
  height: 80rpx;
  line-height: 80rpx;
  margin: 20rpx 0;
  border-bottom: 1rpx solid #eee;
  padding-left:20rpx;
}
.section .weui-cell .weui-cell__bd{
  position: relative;
  padding-right: 60rpx;
}
.section .weui-cell .weui-cell__bd .forget{
  position: absolute;
  right: 0;
  top: -10rpx;
  color: #aaa;
  font-size: 30rpx;
}
/* button按钮样式 */
.btn-area button{
  width: 80%;
  margin: 0 auto;
  border: 0rpx;
  background: #0fceb4;
  color: #fff;
  margin-top: 100rpx;
}
/* 底部注册样式 */
.foor{
  margin: 20rpx 20rpx 0 80rpx; 
}
.foor .gray{
  color: #ccc;
  font-size: 30rpx;
}
.foor .register{
  color: #0fceb4;
  font-size: 30rpx;
  border-bottom: 1rpx solid #0fceb4;
}

js功能

Page({
  data: {
    // 账号
    key:'',
    // 密码
    password:'',
    // 密码的显示和隐藏
    isShowPassword: true

  },
  // 账号有内容显示清除按钮
  bindKeyInput: function (e) {
    this.setData({
      key: e.detail.value,
    })
  },
  // 密码有内容显示清除按钮
  bindPassInput: function (e) {
    this.setData({
      password: e.detail.value,
    })
  },
  // 登陆跳转
  bindViewTap:function(){
    wx.redirectTo({
      url:'../logs/logs'
    })
  },
  // 密码显示和隐藏切换
  toggleShowPassword: function (e) {
    var isShowPassword = !this.data.isShowPassword; 
    this.setData({ 
      isShowPassword: isShowPassword 
    });
  },
  // 清除账号内容
  eliminate:function(){
    this.setData({
      key:""
    })
  }
})