当前位置：网站首页>js和jq实现点击小眼睛后密码显示与隐藏切换

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

2022-08-09 15:03:00 【不知-_】

效果（要求）

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

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>