input-Eingabefeld type-Switcher mit JavaScript

Bei einer Registrierung auf einer Webseite besteht die Gefahr, dass man sich versehentlich bei seinem gewünschten Passwort vertippt. Viele Webmaster lassen das Passwort deshalb wiederholt anfordern, um die Wahrscheinlichkeit eines Fehlers zu mindern.

Eine andere Method ist es, das Passwort auf Wunsch des Besuchers in Klarschrift anzeigen zu lassen. Hierfür klickt dieser in eine Checkbox neben einem Input-Eingabefeld, worauf sich der Anzeigetyp des eingebenen Textes ändert: von “password” zu “text” und wieder zurück.

Ich zeige, wie dies mit wenigen JavaScript-Zeilen umzusetzen ist.

Beispiel

So sieht das Eingabefeld mit dem Typswitcher aus:

Eingabefelder

Sowohl das Input-Element, in welches das Passwort eingegeben werden soll, als auch jenes für die Checkbox benötigen eine eindeutige ID, auf welche JavaScript zugreifen kann.

Passwort: <input type="password" id="pwdInput" />
<input type="checkbox" id="checkInput" onclick="zeigeKlartext()" name="checkbox" /> <label for="checkbox">In Klartext anzeigen</label>

Der Code onclick="zeigeKlartext()" ruft eine im folgenden JavaScript definierte Funktion auf, sobald auf die Checkbox geklickt wurde.

JavaScript

Der folgende JavaScript-Code enthält eine Funktion, welche den Status der Checkbox abruft (“gesetzt” oder “nicht gesetzt”) und dementsprechend den Typen des Eingabefelds ändert: “password” und “text”. Hierzu greift es auf die IDs der Elemente zu.

<script type="text/javascript">
	function zeigeKlartext(){
		if(document.getElementById("checkInput").checked == true){
			document.getElementById("pwdInput").type = "text";
		}else{
			document.getElementById("pwdInput").type = "password";
		}
	}
</script>

Dieser Code kann innerhalb der head- oder body-Tags des HTML-Dokuments eingefügt werden.

Dieser Artikel wurde vertaggt mit , , , , , , .
Kategorien: HTML, JavaScript, Webdesign

Hat Ihnen dieser Artikel gefallen? - Dann abonnieren Sie vlblog um über neue Themen rund ums Web informiert zu werden.

Ein Kommentar zu “input-Eingabefeld type-Switcher mit JavaScript”

  1. Thomas sagt:

    Soweit alles richtig, aber >leider< gibt es da noch die IE-User. Der IE erlaubt die Änderung des Typs nunmal nicht wärend der Laufzeit. Somit bringt das Script einen Fehler und mehr nicht

    Eine möglichst einfache Lösung ist mir bisher noch nicht eingefallen….

Hinterlasse eine Antwort