实现密码输入框的显示和隐藏功能
( 以下以小程序开发为例 )
功能简述:密码输入框默认内容是不可见的,当点击右侧的眼睛变为可见,再点击右侧眼睛变为不可见,如下图所示
实现思路:使用两个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,不可使用。