Heim > Artikel > Web-Frontend > JavaScript stellt automatisch den Standardtext wieder her, nachdem Sie auf „Text“ geklickt haben, um die Fähigkeiten von „box_javascript“ zu löschen

JavaScript stellt automatisch den Standardtext wieder her, nachdem Sie auf „Text“ geklickt haben, um die Fähigkeiten von „box_javascript“ zu löschen

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

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>

Der obige Code registriert einen Onclick-Ereignishandler für das Div. Wenn auf das Div geklickt wird, wird dieser Handler ausgeführt, um die Hintergrundfarbe des Divs auf Grün zu setzen.

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 obige Code bindet die Event-Handler-Funktion an das Onblur-Ereignis des Eingabeelements. Wenn das Eingabeelement den Fokus verliert, kann die Hintergrundfarbe auf Grün gesetzt werden.

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>

Der obige Code erfüllt unsere Anforderungen. Wenn zu diesem Zeitpunkt der Mausfokus das Textfeld verlässt, kann der Inhalt im Textfeld gelöscht werden Der Wert des Textfelds wird auf den Standardzustand zurückgesetzt. Wenn das Passwortfeld jedoch etwas problematisch ist, weil das Passwortfeld nicht im Klartext angezeigt wird, finden Sie im nächsten Absatz die Lösung, wie Sie eine Eingabeaufforderung im Passwortfeld implementieren.

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>

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. Beim Klicken auf das Textfeld wird das ursprünglich angezeigte Textfeld ausgeblendet , was bedeutet, dass es sich lediglich um einen Ersatz handelt.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für alle beim Erlernen der Javascript-Programmierung hilfreich sein wird.

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：Lösung für das Problem des jquery-Selektors unter ie7, der dazu führt, dass an „fail_jquery“ angehängt wirdNächster Artikel：Lösung für das Problem des jquery-Selektors unter ie7, der dazu führt, dass an „fail_jquery“ angehängt wird

In Verbindung stehende Artikel

Mehr sehen