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

JavaScript implementiert Eingabeaufforderungen im Eingabefeld (Passwortfeld)_Javascript-Kenntnisse

WBOY
Freigeben: 2016-05-16 15:20:39
Original
2325 Leute haben es durchsucht

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> 
Nach dem Login kopieren

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.

Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage