czwartek,
Zmiana typu pola formularza
Dzięki językowi JavaScript można dynamicznie zmieniać typ pola formularza. Może to być użyteczne podczas wprowadzania długiego hasła. Jeśli znaki są niewidoczne, trudno odnaleźć błąd. Funkcja „Pokaż hasło” jest spotykana w wielu aplikacjach, w prezentowanym przykładzie zrealizowano takie zadanie.
Demonstracja działania przykładu
Kod HTML
<div id="tester">
<label>Wprowadź hasło: <input type="password" value="tajne@haslo"></label>
<div><a href="#">Pokaż hasło</a></div>
</div>
Kod JavaScript
Do uruchomienia prezentowanej funkcji wykorzystano znacznik a, standardowo służący do tworzenia odnośników. Można dyskutować nad tym, czy jest to odpowiedni element pod względem semantycznym, jednak z drugiej strony znacznik ten jest łatwo i domyślnie dostępny dla użytkowników posługujących się jedynie klawiaturą. Zastosowany mechanizm naprzemiennie pokazuje i ukrywa hasło. Aby zablokować domyślną akcję przypisaną do znacznika a, jaką jest otworzenie zasobu wskazywanego w atrybucie href, wykorzystano metodę preventDefault(). W dalszej części skryptu badany jest aktualny typ pola do wpisywania hasła i następuje jego zamiana na inny, ograniczając wybór do password i text. Dodatkowo zmieniany jest tekst odnośnika, tak aby użytkownik wiedział, którą opcję może uruchomić.
document.querySelector('#tester a').addEventListener('click', function(e) {
e.preventDefault();
w=document.querySelector('#tester input');
if(w.type == 'password') {
w.type = 'text';
this.innerHTML = 'Ukryj hasło';
} else {
w.type = 'password';
this.innerHTML = 'Pokaż hasło';
}
})
