【无标题】2022 3 1

我们在连接WiFi输入密码时有时输入一半忘记自己输入到哪里了，这时有一个按钮可以点击查看密码。显示效果如下：

从隐藏密码

 

到显示密码

 

 

很简单 代码和样式一页搞定

 

定义一个input标签和两个span标签 ，span标签代表着两个样式，一个是睁开眼睛一个是闭上眼睛。一开始是闭上眼睛的效果 将睁眼的标签先设置为display:none 隐藏， 闭眼标签为显示。获取两个标签的点击事件，当点击闭眼标签时，睁眼就会显示，闭眼就会隐藏并且将当前input 类型修改为可修改的文本标签 type=”text” ，反之亦然 当点击睁眼时闭眼就会显示，睁眼隐藏，将input标签的输入类型修改为密码 type= password。

   由上面的步骤完成了对输入密码框显示和隐藏的操作。