web-dev-qa-db-fra.com

garder l'espace réservé sur focus dans IE10

Sous WebKit et Firefox, le texte d'un inputplaceholder reste sur focus— il ne disparaît pas avant que input.val contient en fait quelque chose.

Existe-t-il un bon moyen de forcer IE10 à faire la même chose?

javascriptjqueryinternet-explorer-10placeholder
62
Aaron Yodaiken

La documentation : - ms-input-placeholder pseudo-class du Internet Explorer Developer Center semble impliquer que cela fonctionne comme prévu.

Le texte de l'espace réservé est affiché avec le style spécifié jusqu'à ce que le champ ait le focus, ce qui signifie que le champ peut être saisi. Lorsque le champ a le focus, il revient au style normal du champ de saisie et le texte d'espace réservé disparaît.

Edit: Si je devais imiter ce comportement, je regarderais les bibliothèques de polyfill d'espace réservé (qui définissent la valeur par défaut, flottent du texte gris sur la zone de saisie, etc) qui fonctionnent avec les anciennes versions d'IE. Ils devraient être modifiés, car ils comportent probablement une fonction de détection de l'espace réservé et s'en remettent au navigateur. De plus, cela aurait une odeur de code "navigateur détecté".

Mise à jour: Une question "IE placeholder text disparaît" a été posée lors d'un Twitter # AskIE question session le 19 juin 2014 et @ IEDevChatrépond "Nous avons un bogue actif pour ce comportement. La prochaine version fournira un correctif"

42
Kevin Hakanson

Les développeurs d'IE ont répondu lors de la session AskIE sur Twitter IEDevChat qu'il s'agit d'un bug conn in IE BugList that ils seront corrigés dans une future version.

Mise à jour: - Malheureusement, le comportement de l'espace réservé est toujours le même dans IE11, mais semble fonctionner dans les versions Edge/Spartan.

10
Vivek Pratap Singh

Il n'y a pas de bon moyen de faire en sorte que l'espace réservé reste concentré sur le champ dans IE 10+ mais si vous essayez de remplacer les étiquettes par des espaces réservés, vous devriez y jeter un œil.

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

C'est un moyen de combiner des espaces réservés et des étiquettes pour améliorer l'expérience utilisateur.

3
Mike Starov

J'ai pensé partager la solution de contournement que j'ai utilisée pour trier ce problème car il semble qu'IE11 n'a toujours pas de correctif.

Dans mon exemple - IE11 avait ajouté ma valeur d'espace réservé en tant que valeur réelle dans la zone de texte.

Voici ce que j'avais dans ma vue de modèle:

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

Voici ce qui est rendu sur le front-end dans IE11:

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

Donc, alors que l'utilisateur se concentrait sur le champ - son curseur était à la fin de la chaîne "..message here" - bizarre!

La solution de contournement pour moi a été d'ajouter une classe initiale à l'élément en charge. Ensuite, un événement de liaison basique sur 'focus' pour vérifier si la classe était présente - s'il est présent, il supprime val et supprime également la classe. Ainsi, dès que l'utilisateur se concentre sur le champ - la valeur est réinitialisée sur une chaîne vide.

Voici l'événement de liaison (cet exemple particulier était sur un modal chargé dynamiquement - vous pouvez simplifier cela):

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

Cela fonctionne bien parce que lorsque l'utilisateur clique sur le champ - l'espace réservé est à nouveau ajouté et cela fonctionne normalement comme vous vous en doutez dans IE11 et tous les autres navigateurs.

Je suis sûr que c'est un exemple de niche, mais cela peut être utile pour d'autres!

1
James