Affichage du texte de l'espace réservé pour le champ du mot de passe dans IE

Vous pouvez également essayer ceci … il détecte que le navigateur n'a pas de support pour l'espace réservé et fonctionne pour tous les types de saisie

 function FauxPlaceholder() { if(!ElementSupportAttribute('input','placeholder')) { $("input[placeholder]").each(function() { var $input = $(this); $input.after('<input id="'+$input.attr('id')+'-faux" style="display:none;" type="text" value="' + $input.attr('placeholder') + '" />'); var $faux = $('#'+$input.attr('id')+'-faux'); $faux.show().attr('class', $input.attr('class')).attr('style', $input.attr('style')); $input.hide(); $faux.focus(function() { $faux.hide(); $input.show().focus(); }); $input.blur(function() { if($input.val() === '') { $input.hide(); $faux.show(); } }); }); } } function ElementSupportAttribute(elm, attr) { var test = document.createElement(elm); return attr in test; } 

Pourriez-vous simplement échanger le champ de texte d'origine avec un champ de mot de passe?

 $('#pass').focus( function(){ var pass = $('<input id="pass" type="password">'); $(this).replaceWith(pass); pass.focus(); } ); <input id="pass" type="text" value="Passowrd"> 

http://jsfiddle.net/UrNFV/

J'ai rencontré ce problème avec IE avant. Voici ma solution 🙂

http://jsfiddle.net/mNchn/

Si je comprends bien ce droit, vous voulez que le champ indique "Mot de passe" lorsque rien n'a été tapé dans celui-ci; Cependant, "Mot de passe" s'affiche comme "********".

Une solution correcte à cela (qui se dégrade aussi gracieusement, selon la façon dont vous l'identifiez) est de:

1. Mettez une ÉTIQUETTE avant le mot de passe INPUT. Définissez le texte de LABEL sur "Mot de passe" et définissez son attribut pour pointer vers l'identifiant INPUT, de sorte que l'INPUT soit focalisé lorsque l'étiquette est cliquée.
2. Utilisez CSS pour positionner l'ÉTIQUETTE au-dessus de l'ENTRÉE, de sorte qu'ils se chevauchent, et il semble que "Mot de passe" soit à l'intérieur de l'ENTRÉE.
3. Assurez-vous que LABEL ne soit visible que lorsqu'une classe CSS ( .showMe , par exemple) lui est appliquée.
4. Utilisez JavaScript pour cacher l'ÉTIQUETTE
   • … si la valeur INPUT est une chaîne vide
   • … ou si l'utilisateur a sélectionné (focalisé) l'ENTRÉE.

Selon que vous souhaitez ou non pouvoir modifier dynamiquement le texte à l'intérieur de l'espace réservé, votre solution la plus simple pourrait consister à ce que le texte de l'espace réservé soit une image.

 input { background: url(_img/placeholder.png) 50% 5px no-repeat; . . . } input:focus { background: none; } 

De toute évidence, il existe de nombreuses façons différentes d'utiliser cette méthode, et vous devrez utiliser une sorte de solution pour obtenir :focus sur les navigateurs qui ne l'appuient pas.

Voici mon plugin:

 if(jQuery.support.placeholder==false){ // No default treatment $('[placeholder]').focus(function(){ if($(this).val()==$(this).attr('placeholder')) $(this).val(''); if($(this).data('type')=='password') $(this).get(0).type='password'; }); $('[placeholder]').blur(function(){ if($(this).val()==''){ if($(this).attr('type')=='password'){ $(this).data('type','password').get(0).type='text'; } $(this).val($(this).attr('placeholder')); } }).blur(); } 

J'ai eu le même problème, j'ai donc écrit un petit plugin

 $.fn.passLabel = function(){ var T = $(this), P = T.find('input[type=password]'), V = pass.val(); P.attr('type','text'); P.focus(function(){ if(V == "") P.attr('type','password'); }); } 

Maintenant, vous l'appelez simplement pour que vous puissiez trouver tous les champs de saisie avec l'attribut du mot de passe.

par exemple.

 $('form').passLabel(); 

Un peu plus tard cependant, ici, je travaillais sur le problème aussi IE9 ne montre pas l'espace réservé du mot de passe en tant que texte, dans presque toutes les réponses sur Internet, certains suggèrent de changer le type de certains, mais si vous le faites, vous aurez un autre problème sur la connexion Page comme lorsque vous verrez avec un double clic sur le champ du mot de passe car son type est changé en texte provenant du mot de passe, bien qu'il fonctionne avec le support. P.ex. prop ("type", "mot de passe") si vous souhaitez modifier le type d'élément.

D'autre part, je pense que la plupart des réponses proviennent d'une seule solution, c'est comme des actions de mise au point et de flou des éléments. Mais lorsque vous appliquez ce plugin, d'autres champs de texte seront également effectués, il n'y a pas de solution spécifique ou je peux dire généreusement, j'ai encore un problème mineur sur la page de connexion avec le champ du mot de passe, mais il montre le texte correctement. en tous cas. Voici comment j'ai configuré, copié, modifié et / ou un autre héréditaire ici.

 (function($) { $.fn.placeholder = function() { $('input[placeholder], textarea[placeholder]').focus(function() { var input = $(this); if (input.val() === input.attr('placeholder')) { if (input.prop("id") === "password") { input.prop("type", "password"); } input.val(''); input.removeClass('placeholder'); } }).blur(function() { var input = $(this); if (input.val() === '' || input.val() === input.attr('placeholder')) { input.addClass('placeholder'); if (input.prop("type") === "password") { input.prop("type", "text"); } input.val(input.attr('placeholder')); } }).blur().parents('form').submit(function() { $(this).find('input[placeholder], textarea[placeholder]').each(function() { var input = $(this); if (input.val() === input.attr('placeholder')) { input.val(''); } }); }); }; })(jQuery); 

Encore un prolem actif …: D