Heim > Artikel > Web-Frontend > JavaScript implementiert Eingabeaufforderungen im Eingabefeld (Passwortfeld)_Javascript-Kenntnisse

JavaScript implementiert Eingabeaufforderungen im Eingabefeld (Passwortfeld)_Javascript-Kenntnisse

WBOYOriginal: 2016-05-16 15:20:392288Durchsuche

Manchmal benötigen wir eine Aufforderungssprache im Anmeldeformular, z. B. „Bitte geben Sie den Benutzernamen ein“ und „Bitte geben Sie das Passwort ein“. Was den Benutzernamen betrifft, ist dies einfach zu sagen, aber im Passwortfeld ist die Sprache angegeben Es erscheint etwas wie „Bitte Passwort eingeben“, da der in das Passwortfeld eingegebene Inhalt nicht im Klartext angezeigt wird. Wenn das Typattribut dynamisch gesteuert wird, treten Kompatibilitätsprobleme auf. Wenn die Eingabe bereits auf der Seite vorhanden ist, ist das Typattribut in IE8 und Browsern unter IE8 schreibgeschützt. Also muss ich mir andere Möglichkeiten überlegen. Der Code lautet wie folgt:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title>
<style type="text/css">
#tx{
width:100px;
}
#pwd{
display:none;
width:100px;
}
</style>
<script type="text/javascript"> 
window.onload=function(){
var tx=document.getElementById("tx");
var pwd=document.getElementById("pwd"); 
tx.onfocus=function(){ 
if(this.value!="密码") 
return; 
this.style.display="none"; 
pwd.style.display="block"; 
pwd.value=""; 
pwd.focus(); 
} 
pwd.onblur=function(){ 
if(this.value!=""){
return; 
} 
this.style.display="none"; 
tx.style.display=""; 
tx.value="密码"; 
} 
}
</script> 
</head> 
<body> 
<input type="text" value="密码" id="tx"/> 
<input type="password" id="pwd" /> 
</body> 
</html>

Der obige Code erfüllt unsere Anforderungen. Bei der Eingabe des Passworts kann eine klare Eingabeaufforderung angezeigt werden.

Das Implementierungsprinzip ist sehr einfach. Im Standardzustand wird das Textfeld mit type="text" angezeigt. Wenn Sie auf das Textfeld klicken, wird der ursprünglich angezeigte Text angezeigt Box ist versteckt, das heißt, ich habe gerade einen Ersatz gemacht.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Beispiel für eine JavaScript-Formularvalidierung, um zu überprüfen, ob das Formularelement leer ist._Javascript-KenntnisseNächster Artikel：Beispiel für eine JavaScript-Formularvalidierung, um zu überprüfen, ob das Formularelement leer ist._Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen