garder un espace réservé sur le focus dans IE10

Question

Sous WebKit et Firefox, le texte d'un fichier input 's placeholder reste dans les parages le focus -Il ne disparaît que lorsque input.val a quelque chose à offrir.

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

Answer 1

En :-ms-input-placeholder pseudo-classe de la documentation de l Centre de développement d'Internet Explorer semble indiquer que cela fonctionne comme prévu.

Le texte de remplacement est affiché avec la mention sp ait le focus, c'est-à-dire qu'il soit possible de taper dans le champ. Lorsque le champ a le focus, le style normal du champ de saisie est rétabli et le texte de l'espace réservé est affiché avec le style spécifié. le texte de l'espace réservé disparaît.

Edita: Si je devais imiter ce comportement, je me tournerais vers les bibliothèques polyfill (qui définissent la valeur par défaut, font flotter un texte gris sur la zone de saisie, etc.) qui fonctionnent avec les anciennes versions d'IE. ) qui fonctionnent avec les anciennes versions d'IE. Elles devraient être modifiées, car elles sont probablement capables de détecter la capacité de l'espace réservé et de s'en remettre au navigateur. De plus, cela aurait une odeur de code de "détection de navigateur".

Mise à jour : Un "Question sur la disparition du texte de l'espace réservé dans IE a été posée lors d'une discussion sur Twitter #AskIE séance de questions le 19 juin 2014 et @IEDevChat a répondu "Nous avons un bogue actif pour ce comportement. La prochaine version fournira un correctif"

Answer 2

Les développeurs de l'IE ont répondu lors de la AskIE session sur twitter IEDevChat qu'il s'agit d'une bogue connu dans la BugList d'IE qu'ils corrigeront dans une prochaine 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.

Answer 3

Il n'y a pas de bonne façon de faire en sorte que les espaces réservés restent au niveau du champ dans IE 10+, mais si vous essayez de remplacer les étiquettes par des espaces réservés, vous devriez jeter un coup d'œil à ceci.

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

Il s'agit d'un moyen de combiner les espaces réservés et les étiquettes pour améliorer l'expérience de l'utilisateur.

Answer 4

J'ai pensé partager la solution de contournement que j'ai utilisée pour résoudre ce problème, car il semble qu'il n'y ait toujours pas de solution pour IE11.

Dans mon exemple, IE11 a ajouté la valeur de mon espace réservé comme valeur réelle dans la zone de texte.

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

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

Voici ce qui s'affiche sur le front-end dans IE11 :

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

Ainsi, lorsque l'utilisateur se concentrait sur le champ, son curseur se trouvait à la fin de la chaîne " message here" - étrange !

La solution que j'ai trouvée consiste à ajouter une classe initiale à l'élément lors de son chargement. Ensuite, un événement bind de base sur "focus" pour vérifier si la classe était présente - si elle est présente, 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 à une chaîne vide.

Voici l'événement bind (dans cet exemple particulier, il s'agissait d'une fenêtre modale chargée 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 car lorsque l'utilisateur sort du champ par la tabulation, l'espace réservé est réajouté et cela fonctionne normalement dans IE11 et dans tous les autres navigateurs.

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

Answer 5

L'astuce consiste à appeler focus() et select() sur l'élément de saisie.

$("#elementId" ).focus();
$("#elementId" ).select();