webentwicklung-frage-antwort-db.com.de

Behalten Sie den Platzhalter in IE10 im Fokus

Unter WebKit und Firefox bleibt der Text in der inputplaceholder auf focus - er verschwindet erst, wenn input.val hat tatsächlich etwas drin.

Gibt es eine gute Möglichkeit, IE10 zu zwingen, dasselbe zu tun?

62
Aaron Yodaiken

Die Dokumentation : - ms-input-placeholder pseudo-class aus dem Internet Explorer Developer Center scheint zu implizieren, dass dies wie vorgesehen funktioniert.

Der Platzhaltertext wird mit dem angegebenen Stil angezeigt, bis das Feld den Fokus hat. Dies bedeutet, dass das Feld eingegeben werden kann. Wenn das Feld den Fokus hat, kehrt es zum normalen Stil des Eingabefelds zurück und der Platzhaltertext verschwindet.

Bearbeiten: Wenn ich dieses Verhalten nachahmen müsste, würde ich mir Platzhalter-Polyfüllbibliotheken ansehen (die den Standardwert festlegen, grauen Text über das Eingabefeld ziehen, etc) die mit älteren IE-Versionen funktionieren. Sie müssten modifiziert werden, da sie wahrscheinlich die Platzhalterfunktion erkennen und sich auf den Browser verschieben. Außerdem würde dies einen "Browser-Erkennungs" -Code-Geruch verursachen.

Update: Eine Frage "IE-Platzhaltertext verschwindet" wurde während einer Twitter-Frage gestellt # AskIE Sitzung am 19. Juni 2014 und @ IEDevChatbeantwortet "Wir haben einen aktiven Fehler für dieses Verhalten. Die nächste Version wird einen Fix bereitstellen."

42
Kevin Hakanson

IE-Entwickler antworteten während der AskIE -Sitzung auf Twitter IEDevChat , dass dies ein bekannter Fehler in IE= BugList that Sie werden in einer zukünftigen Version behoben.

Update: - Leider ist das Platzhalterverhalten in IE11 immer noch dasselbe, scheint aber in Edge/Spartan-Versionen zu funktionieren.

10

Es gibt keine gute Möglichkeit, Platzhalter in IE 10+ auf dem Feld zu halten, aber wenn Sie versuchen, Beschriftungen durch Platzhalter zu ersetzen, sollten Sie sich dies ansehen.

http://mozmonkey.com/2014/02/css-only-placeholders-field-labels-i-e-float-labels/

Es ist eine Möglichkeit, Platzhalter und Beschriftungen zu kombinieren, um die Benutzererfahrung zu verbessern.

3
Mike Starov

Ich dachte, ich würde die Problemumgehung, die ich zum Sortieren dieses Problems verwendet habe, teilen, da IE11 anscheinend immer noch keine Lösung hat.

In meinem Beispiel hat IE11 meinen Platzhalterwert als tatsächlichen Wert im Textbereich hinzugefügt.

Folgendes hatte ich in meiner Vorlagenansicht:

<textarea placeholder="Type your message">
</textarea>

Folgendes wird auf dem Front-End in IE11 gerendert:

<textarea placeholder="Type your message">
    Type your message
</textarea>

Als sich der Benutzer auf das Feld konzentrierte, befand sich sein Cursor am Ende der Zeichenfolge "..message here" - ungerade!

Die Problemumgehung bestand für mich darin, dem Element beim Laden eine Anfangsklasse hinzuzufügen. Dann ein grundlegendes Bindungsereignis auf 'focus', um zu überprüfen, ob die Klasse vorhanden war - falls vorhanden, entfernt es val und dann auch die Klasse. Sobald sich der Benutzer auf das Feld konzentriert, wird der Wert auf eine leere Zeichenfolge zurückgesetzt.

Hier ist das Bind-Ereignis (dieses Beispiel befand sich auf einem dynamisch geladenen Modal - Sie können dies vereinfachen):

$(document).on( "focus", '.textarea', function () {
    if ($(this).hasClass('placeholder-val-present')) {
        $(this).val("").removeClass('placeholder-val-present');
    }
});

Dies funktioniert sehr gut, da der Platzhalter beim Verlassen des Feldes durch Tabulatoren neu hinzugefügt wird und normal funktioniert, wie es in IE11 und allen anderen Browsern zu erwarten ist.

Ich bin mir sicher, dass dies ein Nischenbeispiel ist - aber es kann für andere nützlich sein!

1
James