Pokaż/ukryj hasło naKliknij przycisk tylko przy użyciu Javascriptu

Question

Chcę utworzyć funkcję przełączania haseł po kliknięciu ikony oka przy użyciu samej obsługi JavaScript. Napisałem kod, ale działa tylko po to, aby pokazać tekst hasła, a nie odwrotnie. Czy ktoś może zobaczyć błąd logiczny w poniższym kodzie?

HTML kod:

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

kod JavaScript:

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

} 

Answer 1

W oparciu o to, co napisał, dodajesz wydarzenie zarówno w HTML i JavaScript (wewnątrz showHide funkcji). Może być możesz zmienić swój kod js od tego, co masz do:

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

Answer 2

Ty są wiążące zdarzenia kliknięcia za każdym razem po kliknięciu przycisku. Nie chcesz wielu programów obsługi zdarzeń. Dodatkowo za każdym kliknięciem redefiniujesz var pwShown = 0, więc nigdy nie możesz przywrócić stanu wejściowego (pwShown pozostaje taki sam).

Usuń atrybut onclick i powiązać zdarzenie click z 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>

Answer 3

Nie trzeba, aby utrzymać jedną dodatkową zmienną „pwShown”, aby zdecydować, czy pokazać tekst lub go ukryć. Wszystko, co musisz zrobić, to zbadać "typ" atrybut "pwd" element jak poniżej:

Working Example

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> 

Answer 4

W kodzie za każdym razem, gdy wywołujesz funkcję showHide(), zmienna pwShown jest ustawiona na 0.

Musisz zadeklarować zmienną pwShown jako globalną.

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

Answer 5

Najprostszym sposobem jest użycie przycisku z atrybutem onclick, który przełącza typ danych wejściowych.

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

Answer 6

Zmienna "pwShown" jest błędnie (jako "pwShow") w sekcji innego swojego kodu JavaScript. Dlatego pwShown nigdy nie zostanie zresetowany do wartości 0.

Answer 7

Jest to poprawa w stosunku do odpowiedzi Tunaki. Nie zwracamy nawet uwagi na to, w jakim stanie znajduje się już pole formularza, ponieważ będzie to całkowicie zależne od stanu myszy. Pozwala to hasło, które należy chwilowo oglądane tylko (tylko tak długo, jak przycisk myszy zostanie przytrzymany nad przyciskiem.)

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

Answer 8

Dump obraz wzrokowy i zamiast użyć przycisk pokazujący „Pokaż” lub „Ukryj”, zgodnie do stanu. Następnie wystarczy kliknąć tekst przycisku. Możesz stylizować przycisk tak, aby był bez obramowania i początkowo z tym samym tłem, co jego otoczenie. Wyróżnij przycisk ustawiając .show: najedź, aby rozjaśnić tło przycisku, lub rozjaśnić kolor tekstu Pokaż/ukryj. Umieszczając wejście i przycisk w tym samym przęśle, będziesz mieć oba wbudowane (CSS - span {display: inline-block;}) i pionowo wyrównać od tego samego dna.

Użyj zwykłego tekstu, znajdującego się poniżej spacji, aby wyświetlić spostrzeżenia dotyczące sprawdzania poprawności. Upewnij się, że indeks kart ma wartość -1, a kolor tła & jest taki sam jak jego otoczenie.

. 
    . 
    . 

    <span class="pwSpan"> 
    <input type="password" placeholder="Password" id="pwd" class="masked" name="password" onblur="return checkPassword();"/> 
    <button type="button" class="show" id="show" value="Show" onclick="showHide()" tabIndex="-1" autocomplete="off" > 
    </button> 
    </span> 
    <input type="text" class="error" name="pwErr" value="" tabIndex="-1" /> 
    . 
    . 
    . 

function showHide() 
{ 
    var pwField = document.getElementById("pwd"); 
    var showHideField = document.getElementById("show"); 
    var showHideValue = showHideField.value; 

    if(showHide.trim() === "Show") 
    { 
     showHideField.value = "Hide"; 
     pwField.setAttribute('type', 'text'); 
    } 
    else 
    { 
     showHideField.value = "Show"; 
     pwField.setAttribute('type', 'password'); 
    } 
} 

Answer 9

Rozwiązanie JQuery z mojego kodu: (wystarczy zmienić identyfikatory).

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

Answer 10

Wykonaj następujące kroki: Pobierz zdjęcia podane poniżej. Stwórz folder. Dodaj swój plik HTML i obrazy w tym samym folderze. Zastąp wartość "b.src" w javascript, a także w swoim kodzie HTML.

Obrazy:

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>