Comment afficher le texte dans le champ mot de passe

[Dernière révision pour inclure le support IE]
^{Mise à jour pour IE9: la version 9 d’IE autorise la modification de l’atsortingbut type pour les éléments d’entrée de type texte / mot de passe dans les deux sens.}

Comme mentionné dans les commentaires (et vérifié), les exemples précédents ne fonctionnaient pas dans IE car ils ne permettaient pas le changement de type par script … Voici une solution de contournement qui remplace l’élément par un autre ( code). suppose que vous commencez avec une zone de texte )

var element = document.getElementById('mysearch'); var text_to_show = 'Enter Password'; element.value = text_to_show; // set the message for the first time element.onfocus = function(){ if (this.value == text_to_show) { var newElement = convertType(this); newElement.value = ''; setTimeout(function(){document.getElementById(newElement.id).focus()},100); } } element.onblur = function(){ if (this.value == '') { var newElement = convertType(this); newElement.value = text_to_show; } } function convertType(elem) { var input = document.createElement('input'); input.id = elem.id; input.value = elem.value; input.onfocus = elem.onfocus; input.onblur = elem.onblur; input.className = elem.className; if (elem.type == 'text' ) { input.type = 'password'; } else { input.type = 'text'; } elem.parentNode.replaceChild(input, elem); return input; } 

[mettre à jour]

Si vous supprimez la réponse originale, j’ai oublié la partie pour laquelle vous souhaitez conserver le champ comme mot de passe ( avec un contenu masqué ).

Réponse révisée :

 var element = document.getElementById('mysearch'); var text_to_show = 'Enter Password'; element.type="text"; // set the type to text for the first time element.value = text_to_show; // set the message for the first time element.onfocus = function(){ if (this.value == text_to_show) { this.type="password"; this.value = ''; } } element.onblur = function(){ if (this.value == '') { this.type="text"; this.value = text_to_show; } } 

[réponse originale]

 var element = document.getElementById('inputID'); // inputID should be the ID given to the password element var text_to_show = 'Enter Password' element.value = text_to_show; element.onfocus = function(){ if (this.value == text_to_show) this.value = '';} element.onblur = function(){ if (this.value == '') this.value = text_to_show;} 

Vous pouvez utiliser ce plugin jQuery , qui supporte les champs de mot de passe.

Vous pouvez soit lui donner un fond d’image avec le texte Enter Password que vous modifiez de manière dynamic en utilisant javascript (idéalement en supprimant simplement une classe CSS),

  or  

ou placez une fausse input que vous remplacez par javascript pour une input mot de passe.

Je ne sais pas dans quelle mesure il serait judicieux de changer de type d’ input à la volée.

document.getElementsByTagName("input")[0].type = "text" /* change a hidden field to text*/ fonctionne sur Firefox, mais je ne compterais pas sur son bon fonctionnement sous IE sans test.

Si vous ne souhaitez pas utiliser de plug-in (comme celui de la réponse de SLaks ), vous devez placer une étiquette au-dessus du champ de mot de passe (ce que fait le plug-in) ou masquer le champ de mot de passe et afficher une entrée de texte dans son champ. placez-le jusqu’à ce qu’il ait le focus.

Internet Explorer ne vous permet pas de changer le type d’une entrée de “mot de passe” à “texte”, donc toute solution essayant de le faire ne fonctionnera pas dans IE.

Voici un exemple qui fonctionne au moins dans IE7 (cela devrait fonctionner dans IE6, mais je ne l’ai pas encore essayé), Chrome et Firefox.

 jQuery(function($) { function make_label_field(password_input, label) { var new_input = document.createElement("input"); new_input.type = "text"; new_input.size = password_input.size; new_input.className = password_input.className; new_input.setAtsortingbute("style", password_input.getAtsortingbute("style")); // Copy any additional properties you need. You may want to add a class // to style the label differently new_input.value = label; $(new_input).focus(function() { $(this).hide(); $(password_input).show().focus(); }); return new_input; } $("input[type=password]").each(function() { $(this).after(make_label_field(this, "Enter password")).hide(); }).blur(function() { if (this.value == "") { $(this).hide().next().show(); } }); }); 

Il y a plusieurs façons de le faire, mais en voici un. Je ne dis pas que c’est efficace, mais cela expliquera mieux ce qui se passe.

Copiez et collez ceci pour l’essayer!

Il crée un champ de texte avec une valeur de password de password , puis lorsque vous cliquez dessus, il passe au champ de mot de passe et supprime sa valeur. Si vous cliquez et que vous n’avez rien entré, il retournera à un text et changera sa valeur en password de password .

Vous pouvez également entrer un champ de texte avec moins de code javascript, tout ce dont vous avez besoin, ce sont les fonctions.

Si vous voulez que cela fonctionne dans IE, vous devez créer deux entrées, une pour le texte et l’autre pour le mot de passe, et display=none et display=block sur chacune d’entre elles.

 element.style.display="none"; 

[réponse révisée] Compatibilité ajoutée pour ie6 à partir de ce site

[article précédent] peut-être cette aide.