JavaScript实现密码框小眼睛按钮的显示与隐藏

痛定思痛。 2022-02-15 07:41 347阅读 0赞

眼睛小按钮的实现需要借助**fontawesome**里面的小图标：[http://fontawesome.dashgame.com/][http_fontawesome.dashgame.com]

![在这里插入图片描述][20190424094704745.png]  
引入font-awesome文件：

<!doctype html> <html>
        <head>
                <meta charset="utf-8">
                <title></title>
                <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
        </head>
         <body>
                <input type="password" id="pwd" placeholder="请输入密码"/>
                <i class="fa fa-eye" onclick="showhide()" id="eye"></i>
    
                <script type="text/javascript">
                var eye = document.getElementById("eye");
                var pwd = document.getElementById("pwd");
    
                function showhide(){
    
                        if (pwd.type == "password") {
                            pwd.type = "text";
                                eye.className='fa fa-eye-slash'
                        }else {
                            pwd.type = "password";
                            eye.className='fa fa-eye'
                        }
                }
        </script> 
      </body> 
    
    </html>

实现效果如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5nMTUwMTE0_size_16_color_FFFFFF_t_70]

原文：[https://blog.csdn.net/qq\_42249896/article/details/87003539][https_blog.csdn.net_qq_42249896_article_details_87003539]

[http_fontawesome.dashgame.com]: http://fontawesome.dashgame.com/
[20190424094704745.png]: /images/20220215/4d2efc6a7cf94e32b5d8fb227ad0f100.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5nMTUwMTE0_size_16_color_FFFFFF_t_70]: /images/20220215/84237c65e0f840978082ffdd49116940.png
[https_blog.csdn.net_qq_42249896_article_details_87003539]: https://blog.csdn.net/qq_42249896/article/details/87003539