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

眼睛的实现需要借助fontawesome里面的小图标:http://fontawesome.dashgame.com/
在这里插入图片描述
引入font-awesome文件:


<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>

js实现密码框小眼睛的显示与隐藏_第1张图片

你可能感兴趣的:(JavaScript)