Analyse und Lösungen für das Inkompatibilitätsproblem von HTML5-Platzhalter für neues Tag in Browsern niedrigerer Versionen _HTML5-Tutorial-Fähigkeiten-H5-Tutorial-php.cn

Analyse und Lösungen für das Inkompatibilitätsproblem von HTML5-Platzhalter für neues Tag in Browsern niedrigerer Versionen _HTML5-Tutorial-Fähigkeiten

WBOY

Freigeben： 2016-05-16 15:46:02

Original

1841 Leute haben es durchsucht

Das Platzhalterattribut ist ein neues Attribut in HTML5, das allgemein als „Platzhalter“ bezeichnet wird. Seine Funktion ähnelt der eines Eingabefelds. Wenn es den Fokus erhält, wird der Standardwert leer, und wenn es den Fokus verliert Ich denke, jeder muss js/jquery verwendet haben, um einen solchen Effekt zu erzeugen. Derzeit wird es nur von modernen Browsern wie Mozilla Firefox 3.7, Apple Safari 4, Google Chrome 4 und Opera11 unterstützt. ”
Das Platzhalterattribut wird für die Eingabe in HTML5 hinzugefügt, um die Hinweisinformationen (Hinweis) des erwarteten Werts des Eingabefelds in Textform anzuzeigen. Das Feld wird angezeigt, wenn die Eingabe leer ist .
Beispiel:

Code kopieren

Der Code lautet wie folgt:

Platzhalter ist sehr komfortabel zu bedienen, was die Entwicklungseffizienz verbessert. Gleichzeitig ist die Benutzererfahrung auch in Browsern höherer Versionen sehr gut, daher verwende ich dieses Attribut sehr gerne.
Allerdings ist es in Browsern unter IE9 ungültig und IE10 unterstützt das Platzhalterattribut, und seine Leistung stimmt nicht mit der anderer Browser überein
•In IE10 verschwindet der Platzhaltertext, wenn mit der Maus geklickt wird (den Fokus erhält)
• Firefox/Chrome/Safari-Klicks verschwinden nicht, aber der Text verschwindet beim Tippen auf der Tastatur
Sollte ich als Entwickler dieses Problem lösen? Derzeit gibt es im Internet eine Reihe ähnlicher Lösungen, und die Implementierungsideen lassen sich grob in zwei Typen unterteilen:
1) Verwenden Sie den Wert der Eingabe als Anzeigetext, simulieren Sie den grauen Stil und fokussieren Sie ihn on $("[placeholder]").val ()=="", Blur $("[placeholder]").val(this.defaultValue); (Methode 2) Verwenden Sie keinen Wert, sondern fügen Sie hinzu Ein zusätzliches Tag (Span) für den Körper und dann die absolute Positionierung deckt die Eingabe ab.
Da die erste Methode hier implementiert ist, nimmt sie den Wert ein und erfordert zusätzliches Urteilsvermögen bei der Überprüfung, daher empfehle ich persönlich die Verwendung der zweiten Methode.
Stellen Sie zunächst fest, ob der aktuelle Browser das Platzhalterattribut unterstützt:

Kopieren Sie den Code Der Code lautet wie folgt :

function placeholderSupport() {
return 'placeholder' in document.createElement('input'); Schlüsselcode auf
:

Code kopieren

Der Code lautet wie folgt: /* *Platzhalter ist kompatibel mit ie9 und niedriger Autor: Gao Fengming add 27.01.2016

$(function(){

if(!placeholderSupport()){ / / Bestimmen Sie, ob der Browser den Platzhalter
$(document).ready(function(){
//Die Standard-Traversal-Schleife unterstützt den Platzhalter
$('[placeholder]').each(function(){
$(this).parent().append("" $(this).attr('placeholder') ""); )
$('[ placeholder]').blur(function(){
if($(this).val()!=""){ //Wenn der aktuelle Wert nicht leer ist, blenden Sie den aus Platzhalter
$(this).parent ().find('span.placeholder').hide();
else{
$(this).parent().find(' span.placeholder').show();
}
})
}

);
Der obige Inhalt stellt Ihnen die Analyse und Lösungen der Inkompatibilität des neuen HTML5-Platzhalter-Tags in Browsern niedrigerer Versionen vor. Ich hoffe, dass er Ihnen hilfreich sein wird.