Das Beispiel in diesem Artikel stellt den js-Beispielcode zum Löschen des Standardtextes vor, belässt ihn und stellt ihn dann wieder her. Der spezifische Inhalt ist wie folgt
Verwandtes Wissen:
1. Definition und Verwendung des Onclick-Ereignisses:
Dieses Ereignis wird ausgelöst, wenn auf ein Objekt geklickt wird.
Browserunterstützung:
1), IE-Browser unterstützt dieses Ereignis.
2) Der Firefox-Browser unterstützt dieses Ereignis.
3) Der Opera-Browser unterstützt dieses Ereignis.
4) Google Chrome unterstützt diese Veranstaltung.
5) Der Safria-Browser unterstützt dieses Ereignis.
Beispielcode:
<html>
<head>
<meta charset="gb2312"/>
<title>脚本之家</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:red;
}
</style>
<script type="text/javascript">
window.onload=function(){
var mydiv=document.getElementById("mydiv");
mydiv.onclick=function(){
mydiv.style.backgroundColor="green";
}
}
</script>
</head>
<body>
<div id="mydiv"></div>
</body>
</html>
2. Definition und Verwendung des Onblur-Ereignisses:
Dieses Ereignis wird ausgelöst, wenn das angegebene Objekt den Fokus verliert.
Beispielcode:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>脚本之家</title>
<style type="text/css">
.mytest{
background-color:green;
}
</style>
<script type="text/javascript">
window.onload=function(){
var username=document.getElementById("username");
username.focus();
username.onblur=function(){
username.style.backgroundColor="green";
}
}
</script>
</head>
<body>
<input type="text" name="username" id="username" />
</body>
</html>
Der nächste Schritt ist das Wichtigste:
Klicken Sie auf das Textfeld, um den Standardtext zu löschen, belassen Sie ihn und stellen Sie ihn dann wieder her
Die Textfelder, die auf vielen Websites ausgefüllt werden müssen, geben standardmäßig eine Standard-Eingabeaufforderungssprache an. Wenn die Maus auf dieses Textfeld klickt, kann der darin enthaltene Standardtext gelöscht und der Fokus gelöscht werden verlässt das Textfeld. Schreiben Sie dann den Standardtext in das Textfeld.
Der Code lautet wie folgt:
<html>
<head>
<meta charset="gb2312">
<title>点击文本框清除默认值</title>
<script type="text/javascript">
window.onload=function()
{
var username=document.getElementById("username");
username.onclick=function()
{
if(username.value=="请输入您的姓名")
{
username.value="";
this.focus();
}
}
username.onblur=function()
{
if(username.value=="")
{
username.value="请输入您的姓名";
}
}
}
</script>
</head>
<body>
<input type="text" value="请输入您的姓名" id="username" />
</body>
</html>
So erkennen Sie, dass die Eingabeaufforderung im Passwortfeld angezeigt wird:
Manchmal benötigen wir eine Aufforderungssprache im Anmeldeformular, z. B. „Bitte geben Sie Ihren Benutzernamen ein“ und „Bitte geben Sie Ihr Passwort ein“. Was den Benutzernamen betrifft, ist es einfach zu sagen, aber „ Bitte geben Sie Ihr Passwort ein“ wird im Passwortfeld angezeigt. Diese Art von Sprache ist etwas problematisch, da der in das Passwortfeld eingegebene Inhalt nicht in klarem Code 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:
<html>
<head>
<meta charset="gb2312">
<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>
Das Implementierungsprinzip ist sehr einfach. Im Standardzustand wird das Textfeld mit type="text" angezeigt. Beim Klicken auf das Textfeld wird das ursprünglich angezeigte Textfeld ausgeblendet , was bedeutet, dass es sich lediglich um einen Ersatz handelt.
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
