Detaillierte Erläuterung des HTML5-Platzhalterattributs

In diesem Artikel wird hauptsächlich das HTML5-Platzhalterattribut im Detail vorgestellt. Das Platzhalterattribut ermöglicht es Ihnen, Eingabeaufforderungsinformationen im Textfeld anzuzeigen

HTML5 führt viele interessante neue Funktionen ein; einige sind in HTML enthalten, andere sind

JavaScript API, die alle sehr nützlich sind. Eine meiner Lieblingsfunktionen ist das Platzhalterattribut im Textfeld (INPUT). Mit dem Platzhalterattribut können Sie Eingabeaufforderungsinformationen im Textfeld anzeigen. Sobald Sie Informationen in das Textfeld eingeben, werden die Eingabeaufforderungsinformationen ausgeblendet. Sie haben diesen Effekt vielleicht schon unzählige Male gesehen, aber die meisten davon wurden in JavaScript implementiert, aber jetzt bietet HTML5 native Unterstützung, und der Effekt ist noch besser!

HTML-Code

<input type="text" name="first_name" placeholder="你的姓名..." />

Wie Sie sehen, müssen Sie lediglich das Platzhalterattribut zum Deklarations-Tag des Textfelds hinzufügen. Um diesen Effekt zu erzeugen, ist überhaupt kein JavaScript erforderlich.

Überprüfen Sie, ob der Browser das Platzhalterattribut unterstützt

Da Platzhalter ein neues Attribut ist, müssen Sie prüfen, ob Ihr Browser es unterstützt, z. B. IE6 und IE8 werden definitiv nicht unterstützt:

JavaScript Code复制内容到剪贴板
function hasPlaceholderSupport() {   
 var input = document.createElement('input');   
 return ('placeholder' in input);   
}

Wenn der Browser des Benutzers die Platzhalterfunktion nicht unterstützt, müssen Sie MooTools, Dojo oder

andereJavaScript-Tools verwenden, um sie zu implementieren:

JavaScript Code复制内容到剪贴板
/* mootools ftw! */  
var firstNameBox = $('first_name'),   
 message = firstNameBox.get('placeholder');   
firstNameBox.addEvents({   
 focus: function() {   
  if(firstNameBox.value == message) { searchBox.value = ''; }   
 },   
 blur: function() {   
  if(firstNameBox.value == '') { searchBox.value = message; }   
 }   
});

Verwenden Sie CSS, um Platzhalter zu verschönern

Im vorherigen Artikel habe ich geschrieben, wie Sie CSS verwenden, um den mit der Maus ausgewählten Text zu verschönern. Bei weiteren Recherchen habe ich ein weiteres interessantes CSS-Feature entdeckt: CSS verschönert den INPUT-Platzhaltereffekt. Lassen Sie mich einfachen CSS-Code verwenden, um den Platzhaltertext im Textfeld zu verschönern.

CSS-Code

Die Verwendung in Firefox unterscheidet sich von der in Google Chrome. Ihre Namen sind leicht zu verstehen:

CSS Code复制内容到剪贴板
/* all */  
::-webkit-input-placeholder { color:#f00; }   
::-moz-placeholder { color:#f00; } /* firefox 19+ */  
:-ms-input-placeholder { color:#f00; } /* ie */  
input:-moz-placeholder { color:#f00; }   
  
/* inpidual: webkit */  
#field2::-webkit-input-placeholder { color:#00f; }   
#field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }   
#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }   
  
/* inpidual: mozilla */  
#field2::-moz-placeholder { color:#00f; }   
#field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }   
#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

Sie können Schriftart, Farbe und Stil des Platzhaltertextes steuern. Sie können den Platzhalter des Textfelds sogar

animiert anzeigen. Die Verschönerung Ihrer Textfelder mag wie eine Kleinigkeit erscheinen, aber bei einigen interaktiven Websites liegt der Schlüssel zum Erfolg im Detail. Jetzt unterstützt IE10 nur noch Platzhalter. Ich glaube, dass immer mehr Menschen diesen nativen Platzhaltereffekt verwenden werden.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des HTML5-Platzhalterattributs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!