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

最新推荐文章于 2022-10-17 09:58:54 发布

远方©

最新推荐文章于 2022-10-17 09:58:54 发布

阅读量3.1k

点赞数 3

分类专栏：前端文章标签：学习历程记录

前端专栏收录该内容

21 篇文章 2 订阅

订阅专栏

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

在这里插入图片描述
引入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>

实现效果如下：

在这里插入图片描述