Zeige Passwort

Das Problem kennt Ihr bestimmt. Bei der Eingabe eines Passwortes möchte man gerne das Geschriebene sehen. Aber ich habe keine Möglichkeit es zu kontrollieren.
Das Geheimnis liegt im Input-Type: <input type="passwort">
Dieser muss nur kurzzeitig geändert werden zu: <input type="text">.

Natürlich können da Hindernisse auftauchen, wenn man keinen direkten Zugriff auf das HTML-Dokument haben sollte. Aber auch hier kann man mit dem Erzeugen eines neuen Div's neben dem Input tricksen (siehe unter JavaScript/Create/).

Wenn Ihr Anregungen oder Kommentare zu disem Gimmick habt, seid so nett und kontaktiert mich unter: Kontakt

Kopiert Euch gerne den Code und probiert es aus: Code

Zeige Passwort

?-)

Code


HTML:

<div class="input-div">
	<input type="password" name="mypassword"><span class="look">8-)</span>
</div>



CSS:

.input-div{
	position:relative;
	display:inline-block;
	width:270px;
	height:auto;
	margin:10px 0;
	background-color:var(--white);
	border:1px solid var(--skillflow-base-font-color);
	overflow:hidden;
}

input[name='mypassword']{
	width:230px;
	height:15px;
	border-color:transparent;
	background-color:var(--white);
	color:var(--black) !important;
}

.look{
	position:relative;
	right:0;
	display:inline-block;
	padding:5px;
	cursor:pointer;
	color:var(--black) !important;
	font-weight:600;
}



JavaScript:

// Nur wenn das Input vorhanden
if(document.querySelector('input[name="mypassword"]')){
	
	// Input-Element zuweisen
	const passwordElement = document.querySelector('input[name="mypassword"]');
	
	// Anzeige-Button zuweisen
	const zeigePw = document.querySelector('span.look');
	// Event Zuweisen => Funktion "showPw"
	zeigePw.addEventListener('click', showPw);
	
	// Zähle die Klicks
	let countPwClick 	= 0;
	
	// Default Type
	let myPwType 		= '';
	function showPw(){
		// Element für Button
		const myButton = document.querySelector('span.look');
		
		// Change Type
		if(countPwClick > 0){
			myPwType = 'password';
			myButton.innerText = '?-)';
			countPwClick = 0;
		}else{
			myPwType = 'text';
			myButton.innerText = '8-)';
			++countPwClick;
		}
		// Type zuweisen
		passwordElement.type = myPwType;
	}
}