Detaillierte Erläuterung des HTML5-Platzhalterattributs-H5-Tutorial-php.cn

Detaillierte Erläuterung des HTML5-Platzhalterattributs

黄舟

Freigeben： 2018-05-23 10:57:58

Original

2539 Leute haben es durchsucht

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="你的姓名..." />

Nach dem Login kopieren

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(&#39;input&#39;);   
 return (&#39;placeholder&#39; in input);   
}

Nach dem Login kopieren

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 = $(&#39;first_name&#39;),   
 message = firstNameBox.get(&#39;placeholder&#39;);   
firstNameBox.addEvents({   
 focus: function() {   
  if(firstNameBox.value == message) { searchBox.value = &#39;&#39;; }   
 },   
 blur: function() {   
  if(firstNameBox.value == &#39;&#39;) { searchBox.value = message; }   
 }   
});

Nach dem Login kopieren

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; }

Nach dem Login kopieren

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!