webentwicklung-frage-antwort-db.com.de

Passwort ein-/ausblenden onKlicken Sie die Schaltfläche nur mit Javascript

Ich möchte die Kennwortumschaltfunktion erstellen, wenn Sie nur mit Javascript auf das Augensymbol klicken. Ich habe Code dafür geschrieben, aber er zeigt nur den Passworttext an und nicht umgekehrt. Kann jemand den Logikfehler im Code unten sehen.

HTML Quelltext:

<input type="password" placeholder="Password" id="pwd" class="masked" name="password" />
        <button type="button" onclick="showHide()" id="eye">
            <img src="eye.png" alt="eye"/>
         </button>

Javascript-Code:

function show()
{
var p = document.getElementById('pwd');
p.setAttribute('type','text');  
}

function hide()
{
   var p = document.getElementById('pwd');
p.setAttribute('type','password');   
}

function showHide()
{
    var pwShown = 0;

document.getElementById("eye").addEventListener("click", function() {
    if (pwShown == 0) 
    {
        pwShown = 1; 
        show();
    } 
    else {
        pwShow = 0;
        hide();
    }
            }, false);

}
javascripthtmlformspasswords
12
user0428

Sie sind bei jedem Klick auf eine Schaltfläche ein verbindliches Klickereignis. Sie möchten nicht mehrere Ereignishandler. Außerdem definieren Sie var pwShown = 0 bei jedem Klick neu, sodass Sie den Eingabezustand niemals rückgängig machen können (pwShown bleibt gleich).

Entfernen Sie das Onclick-Attribut und binden Sie das Click-Ereignis mit addEventListener :

function show() {
    var p = document.getElementById('pwd');
    p.setAttribute('type', 'text');
}

function hide() {
    var p = document.getElementById('pwd');
    p.setAttribute('type', 'password');
}

var pwShown = 0;

document.getElementById("eye").addEventListener("click", function () {
    if (pwShown == 0) {
        pwShown = 1;
        show();
    } else {
        pwShown = 0;
        hide();
    }
}, false);
<input type="password" placeholder="Password" id="pwd" class="masked" name="password" />
<button type="button" id="eye">
    <img src="https://cdn0.iconfinder.com/data/icons/feather/96/eye-16.png" alt="eye" />
</button>

21
dfsq

Der einfachste Weg ist die Verwendung einer Schaltfläche mit einem onclick-Attribut, das den Typ der Eingabe umschaltet.

<input type="password" id="password" value="myPassword"/>
<button onclick="if (password.type == 'text') password.type = 'password';
  else password.type = 'text';">toggle</button>

18
Ameen Ra'is

Sie brauchen keine zusätzliche "pwShown" -Variable, um zu entscheiden, ob Sie Text anzeigen oder ausblenden möchten. Sie müssen lediglich das Attribut "type" des Elements "pwd" wie folgt untersuchen: 

Arbeitsbeispiel

JavaScript: 

document.getElementById("eye").addEventListener("click", function(e){
        var pwd = document.getElementById("pwd");
        if(pwd.getAttribute("type")=="password"){
            pwd.setAttribute("type","text");
        } else {
            pwd.setAttribute("type","password");
        }
    });

HTML: 

<input type="password" placeholder="Password" id="pwd" class="masked" name="password" />
        <button type="button" id="eye">
            <img src="eye.png" alt="eye"/>
         </button>
5
Prateek

Führen Sie die folgenden Schritte aus: Laden Sie die unten angegebenen Bilder herunter. Machen Sie einen Ordner. Fügen Sie Ihre HTML-Datei und die Bilder im selben Ordner hinzu. Ersetzen Sie den Wert von "b.src" in Javascript sowie in Ihrem HTML-Code entsprechend.

Bilder:  Images  Images 

function show() {
var a=document.getElementById("pwd");
var b=document.getElementById("EYE");
if (a.type=="password")  {
a.type="text";
b.src="https://i.stack.imgur.com/waw4z.png";
}
else {
a.type="password";
b.src="https://i.stack.imgur.com/Oyk1g.png";
}
}
<input type="password" id="pwd">
<button onclick="show()"><img src="https://i.stack.imgur.com/Oyk1g.png" id="EYE"></button>

3
user8158111

Die Variable "pwShown" ist im else-Abschnitt Ihres Javascript-Codes falsch geschrieben (als "pwShow"). Daher wird pwShown nie auf 0 zurückgesetzt.

0
user5952347

Basierend auf dem, was Sie geschrieben haben, fügen Sie das Ereignis sowohl in HTML als auch in Javascript (in der Funktion showHide) hinzu. Möglicherweise können Sie Ihren js-Code von dem, was Sie haben, ändern in:

function showHide()
{
  var input = document.getElementById("pwd");
  if (input.getAttribute("type") === "password") {
    show();
  } else {
    hide();
  }
}
0
Mindastic

JQuery-Lösung aus meinem Code: (nur die IDs ändern).

$(document).ready(function () {
        $("#eye").click(function () {
            if ($("#password").attr("type") === "password") {
                $("#password").attr("type", "text");
            } else {
                $("#password").attr("type", "password");
            }
        });
  });
0
Orwol Chiles

Dies ist eine Verbesserung gegenüber Tunakis Antwort. Wir möchten nicht einmal prüfen, in welchem ​​Zustand sich das Formularfeld bereits befindet, da dies vollständig vom Zustand der Maus bestimmt wird. Dadurch kann das Passwort nur vorübergehend angezeigt werden (nur solange die Maustaste über der Taste gedrückt wird.)

<html>
<head>
    <title>Visible Password Test</title>
</head>

<body>
Password : <input type="password" name="password" id="password" />

<button type="button" id="eye" title="Did you enter your password correctly?" 
    onmousedown="password.type='text';" 
    onmouseup="password.type='password';" 
    onmouseout="password.type='password';">Peek at Password</button>

</body>
</html>
0
Mike Lewis

Wenn Sie in Ihrem Code die Funktion showHide () aufrufen, wird die Variable pwShown auf 0 gesetzt.

Sie müssen die Variable pwShown als globale Variable deklarieren.

var pwShown = 0;
function showHide()
{
 ...
}
0
Pillow the Awesome