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.softwhy.com/" />
<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.
Bei dem oben genannten Inhalt handelt es sich um das vom Herausgeber geteilte Wissen zur Implementierung von Eingabeaufforderungen im Passwortfeld mithilfe von JavaScript. Ich hoffe, es gefällt Ihnen.
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
