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

眼睛的实现需要借助fontawesome里面的小图标: 引入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>
经验分享 程序员 微信小程序 职场和发展