web-dev-qa-db-fra.com

Compatibilité du navigateur HTML Placeholder

Quels navigateurs prennent en charge la balise HTML d'espace réservé pour les saisies de texte? Internet Explorer le prend-il en charge? (J'ai un espace réservé JavaScript que je peux utiliser pour les navigateurs qui ne le prennent pas en charge.)

<input type=TEXT placeholder="placeholder here" />

htmlbrowserplaceholder
41
NoodleOfDeath

Il est actuellement pris en charge par tous les principaux navigateurs sauf IE 9 et les versions antérieures et Opera mini.

Pour les mises à jour, jetez un œil à w3schools-specs ou, mieux encore, affichez ce overview .

17
Tim

Pour ceux que cela intéresse, voici la solution de repli jQuery que j'utilise 
Je l’utilise avec jQuery Validation Engine.
Remplacez FORMCLASS par la classe de votre formulaire. 

<!-- IF IE - use Placeholder Fallback -->
<!--[if lt IE 10 ]>
<script>
  $(".FORMCLASS").find('[placeholder]').each(function(){ 
    $(this).val($(this).attr('placeholder'));
    $(this).focus(function() {
      if ($(this).attr('placeholder')==$(this).val()) {
        $(this).val('');
      }
    });
  });
</script>
<![endif]-->
18
Simpson

Selon this , IE 10 le prend en charge. (Vous pouvez le tester ici )

Je résous le problème de cette manière, probablement la plus simple:

<!--[if lt IE 10]>email:<![endif]-->
<input placeholder='email' type='text' name='email'>
17
user669677

Firefox le supporte également depuis la 4.0

10
vinz

IE ne prend pas en charge les espaces réservés 

Je ressens mieux ce code et il fonctionne dans tous les principaux navigateurs.

<input id="example-email" type="text" value="Email Address" onfocus="if(this.value === 'Email Address') this.value = '';" onblur="if(this.value === '') this.value = 'Email Address';" name="example-email">
8
Sanjay

On a peut-être répondu à la question il y a quelques années, mais je l'ai trouvée aujourd'hui en train de faire une recherche.

Puisqu’une bonne référence et des photos n’étaient pas fournies auparavant, je mets à jour cette question avec les deux.

Attribut d'espace réservé HTML5 dit fondamentalement:

L'attribut d'espace réservé est pris en charge par tous les principaux navigateurs, à l'exception d'Internet Explorer.

FYI: Ceci inclut IE9.

screenshot

6
jp2code

Placeholders sont entièrement supportés par:

  • FF 4+
  • Chrome 4+
  • Safari 5+
  • Opera 11.6+
  • IE 10+

Source: Puis-je utiliser l'attribut d'espace réservé d'entrée?

4
Wilk

Si quelqu'un recherche une solution semblable à un espace réservé HTML5 pour les navigateurs non pris en charge, voici un bon article à ce sujet:

http://www.viget.com/inspire/a-better-jquery-in-field-label-plugin/

4
Mecalito

Pour ceux qui veulent la solution la plus simple, utilisez les fonctionnalités intégrées!

<input type="text" name="email" value="Email Address" placeholder="Email Address" onfocus="if(this.value==this.placeholder) this.value=''" onblur="if(this.value=='') this.value=this.placeholder">

Testé en chrome et IE8 :)

Remarque: J'utilise ceci avec plus de javascript pour valider l'entrée et donner un retour d'informations à l'intérieur du champ lui-même en modifiant la valeur et l'espace réservé à l'exécution.

3
vahanpwns

Je sais que c'est une vieille question. Ma suggestion est d'utiliser Modernizr pour détecter le support réservé! https://modernizr.com/

0
galengodis