Przejdź do treści

Centrum Kształcenia Zawodowego i Ustawicznego w Mrągowie

Zmiana typu pola formularza

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

Pokaż hasło

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

Mark Twain

Artykuł: Szkoła Rycerska

Szkoła Rycerska

Ślubowanie kadetów Oddziału Przygotowania Wojskowego

Kawaleria polska

Słynne szarże polskiej kawalerii

Nasze technikum

Technik informatyk

Szkoły dla dorosłych

Nasza szkoła

Pełna oferta edukacyjna

Oferta szkoły