js实现密码输入框切换显示和隐藏

1、需求背景

  在设置密码信息时,需要支持输入内容的隐藏和可见的切换,效果如下:

  隐藏:

  显示:

2、实现原理:

  1. 设置两个input,一个type为password,一个type为text,分别用于显示隐藏密码和可见密码

  2. 设置两个字体图标,一个为睁开的眼睛,一个为闭上的眼睛,用于点击切换两个input的显示,当然,图标的样式可以任意定义

  3. 保证两个input的值相同

3、代码实现:

  1. html

    

  2. css

    

  3. js

    

 4、注意事项:

  1. 本文代码使用了jquery,需引入;使用了字体图标,需引入

  2. IE中默认对type为password的input设置了眼睛图标用于显示密码,对type为text的input设置了×号图标用于清除内容,本文将其设置为隐藏,保证浏览器兼容性

  3. 因为两个input保存的值是一致的,因此在校验和提交表单时,只需处理其中一个即可

猜你喜欢

转载自www.cnblogs.com/fe-object/p/10752025.html