Question

我正在实现一种功能，以在单击密码字段右侧的眼睛图标时显示密码字段的内容。单击该项目时，应该发生2件事： 1.密码字段应成为文本字段 2.眼睛的图标应变成双眼 3.再次单击该图标时，反之亦然。

我将Bootstrap 4.0和Font Awesome用于一般设计和图标。我当前的代码会更改密码字段的类型，但不会更改按钮上的图标。

有什么想法吗？

HTML部分：

<div class="form-group">
    <label for="password">Passwort</label>
    <div class="input-group" id="show_hide_password">
        <input type="password" id="password" class="form-control" name="password" placeholder="Leer lassen wenn das Passwort nicht ge&auml;ndert werden soll.">
        <div class="input-group-append">
            <button class="btn btn-outline-secondary" type="button" id="eyeButton" data-action="showPW"><span id="eyeLogo" class="far fa-eye"></span></button>
        </div>
    </div>
</div>

还有Javascript部分：

var theeyeButton = document.querySelector("[data-action=showPW]");
var theeyeLogo = document.querySelector("#eyeLogo");
var pwField = document.querySelector("#password");
//var theeyeButton = document.getElementById("showPW");
if (theeyeButton) {
    theeyeButton.addEventListener("click", function (event) {
        if(pwField.type == "text"){
            pwField.type = "password";
            theeyeLogo.className = "far fa-eye";
        }
        else if(pwField.type == "password"){
            pwField.type = "text";
            theeyeLogo.className = "far fa-eye-slash";
        }
    });
}

Answer 1

可以做到

<!DOCTYPE html>
    <html lang="en">
    <head>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <div class="form-group">
        <label for="password">Passwort</label>
        <div class="input-group" id="show_hide_password">
            <input type="password" id="password" class="form-control" name="password" placeholder="Leer lassen wenn das Passwort nicht ge&auml;ndert werden soll.">
            <div class="input-group-append">
                <button class="btn btn-outline-secondary" type="button" id="eyeButton" data-action="showPW" value="button">button<span id="eyeLogo" class="far fa-eye-slash"></span></button>
            </div>
        </div>
    </div>
    <script>
    var theeyeButton = document.querySelector("[data-action=showPW]");
    var theeyeLogo = document.querySelector("#eyeLogo");
    var pwField = document.querySelector("#password");
    //var theeyeButton = document.getElementById("showPW");
    if (theeyeButton) {
        theeyeButton.addEventListener("click", function (event) {
            if(pwField.type == "text"){
                pwField.type = "password";
                theeyeLogo.className = "far fa-eye-slash";
            }
            else if(pwField.type == "password"){
                pwField.type = "text";
                theeyeLogo.className = "far fa-eye";
            }
        });
    }
    </script>
    </body>
    </html>

Answer 2

尝试此js代码。

var theeyeButton = document.querySelector("[data-action=showPW]");
var theeyeLogo = document.querySelector("#eyeLogo");
var pwField = document.querySelector("#password");
//var theeyeButton = document.getElementById("showPW");
if (theeyeButton) {
    theeyeButton.addEventListener("click", function (event) {
       if(pwField.type == "text"){
            pwField.type = "password";
            document.getElementById("eyeLogo").classList.remove("far", "fa-eye-slash");
            document.getElementById("eyeLogo").classList.add("far","fa-eye");
        }
        else if(pwField.type == "password"){
            pwField.type = "text";
            document.getElementById("eyeLogo").classList.remove("far","fa-eye");
            document.getElementById("eyeLogo").classList.add("far", "fa-eye-slash");
        }
    });
}

似乎无法更改span元素的类

2 个答案: