}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';
  }
})
Artykuł: Zygmunt Piasecki

Zygmunt Piasecki

Artykuł: Karol Pniak

Karol Pniak

Artykuł: Stefan Kudelski

Stefan Kudelski

Artykuł: Lotus 1-2-3

Lotus 1-2-3

Artykuł: Mieczysław Dziemieszkiewicz

Mieczysław Dziemieszkiewicz

Artykuł: Emil Krukowicz-Przedrzymirski

Emil Krukowicz-Przedrzymirski

Nasze technikum

Szkoły dla dorosłych

Pełna oferta edukacyjna