微信小程序input输入框密码的显示与隐藏

1.实现效果

棉麻.gif

2.实现原理

input的type之中并无password属性。

在这里插入图片描述

 小程序提供了一个password属性，用来表示是否是密码类型。

关键思路：动态改变password的值，从而实现密码的显示与隐藏。

3.实现代码

// pages/cssCase/inputPass/index.js
Page({
  data: {
    open: false,//默认不显示密码
    focus:false,//是否获取焦点
  },
  switch() {
    this.setData({
      open: !this.data.open
    })
  },
  focus(){
    this.setData({
      focus:true
    })
  },
  blur(){
    this.setData({
      focus:false
    })
  }

})

<view class="mb20">小程序的type木有password属性，但有password,判断是否是密码类型</view>
<view class="flex-row j_b">
  <view class="flex-row fill_box">
    <text>密码：</text>
    <input type="text" password="{{!open}}" placeholder="请输入密码" bindfocus="focus" bindblur="blur"  class="{{focus?'ative':''}}"/>
  </view>
  <image src="{{open?'../img/open_eye.png':'../img/no_eye.png'}}" class="eye" catchtap="switch" />
</view>

page {
  padding: 40rpx;
  background-color: #fff;
}

.eye {
  width: 40rpx;
  height: 40rpx;
  margin-left: 20rpx;
  flex-shrink: 0;
}

.fill_box {
  font-size: 25rpx;
  color: #333;
  flex: 1;
}

.fill_box text {
  margin-right: 25rpx;
}

.fill_box input {
  border-bottom: 1px solid #ccc;
  flex: 1;
}
.ative{
  border-bottom: 1px solid #1b347a!important;
}

.mb20 {
  margin-bottom: 40rpx;
  font-size: 25rpx;
  font-weight: bold;
  color: #333;
}

4.更多小程序demo，关注苏苏的码云。