js和jq实现点击小眼睛后密码显示与隐藏切换

最新推荐文章于 2024-06-07 19:03:53 发布

原创最新推荐文章于 2024-06-07 19:03:53 发布 · 1.5k 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #jquery #前端

前端零零散散专栏收录该内容

27 篇文章

订阅专栏

这篇博客展示了如何使用纯JavaScript和jQuery实现密码输入框后面的‘小眼睛’图标来切换显示和隐藏密码的功能。通过修改input元素的type属性和图标类名，实现了点击图标切换密码可见性的效果。同时探讨了jQuery入口函数的位置选择及其作用，指出其通常应在页面加载完成后执行以确保DOM就绪。

效果（要求）

在这里插入图片描述
眼睛的图标这里是使用了阿里巴巴图标库的图标。

js实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>密码框后面的小眼睛</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_3448045_gwooawlcz3s.css">
</head>

<body>

    <div>
        <input type="text" id="pwd">
        <i class="iconfont icon-eye-fill" id="eye" onclick="change()"></i>
    </div>

    <script>
        var pwd = document.getElementById("pwd");
        var eye = document.getElementById("eye");

        function change(){
            if( pwd.type == "text"){
                pwd.type = "password";
                eye.class = "iconfont icon-no_eye"
            }
            else{
                pwd.type = "text";
                eye.class = "iconfont icon-eye-fill"
            }
        }
    </script>
</body>

</html>

jq实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>密码框后面的小眼睛</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_3448045_gwooawlcz3s.css">
    <script src="../js/jquery.min.js"></script>
</head>

<body>

    <div>
        <input type="text" id="pwd">
        <i class="iconfont icon-eye-fill" id="eye"></i>
    </div>

    <script>
        var pwd = $("#pwd");
        var eye = $("#eye");

        eye.on('click', function() {
            if (pwd.attr("type") == "text") {
                pwd.attr("type", "password");
                eye.attr("class", "iconfont icon-no_eye");
            } else {
                pwd.attr("type", "text");
                eye.attr("class", "iconfont icon-eye-fill");
            }
        })
    </script>
</body>

</html>