实现密码输入框的显示和隐藏功能

实现密码输入框的显示和隐藏功能

（ 以下以小程序开发为例 ）

功能简述：密码输入框默认内容是不可见的，当点击右侧的眼睛变为可见，再点击右侧眼睛变为不可见，如下图所示


实现思路：使用两个input组件，第一个input组件type属性设置为 password ，不可见时显示，第二个input组件 type 属性设置为 text，可见时显示该组件，代码如下所示：

<input 
  wx:if="{{passwordType == 'password'}}"
  bindinput="handlePasswordInput"
  placeholder-style="color: rgba(170,170,180,1);" 
  class="input password" 
  type="password" 
  placeholder="密码"
  value="{{password}}"
></input>
<input 
  wx:if="{{passwordType == 'text'}}"
  bindinput="handlePasswordInput"
  placeholder-style="color: rgba(170,170,180,1);" 
  class="input password" 
  type="text" 
  placeholder="密码"
  value="{{password}}"
></input>

可以通过wx:if控制组件的显示和隐藏

注意： 也可以使用一个input组件通过修改input的type属性实现内容的显示和隐藏，在微信小程序的模拟器中有效，但是在ios真机上会出现bug，不可使用。