js实现密码框小眼睛的显示与隐藏

眼睛的实现需要借助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>

在这里插入图片描述

版权声明：本文为qq_42249896原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。