Étiquette pour le champ de mot de passe

Question

<input type="text" value="useraname" /> 
<input type="password" value="password" /> 

J'utilise jQuery pour faire disparaître les étiquettes en ligne lors du clic/focus. Le mot de passe montre les taureaux comme d'habitude, mais je me demande s'il est possible d'afficher d'une façon ou d'une autre l'étiquette "Mot de passe" en tant que texte (au lieu de ••••) dans le champ mot de passe?

Édité pour ajouter: Je veux que le mot de passe tapé par l'utilisateur soit caché ofcourse !.

Merci

Answer 1

Il existe des plugins pour cela. Voir labelify par exemple

Answer 2

Si vous faites le input type = « zone de texte », vous serez en mesure de voir le mot de passe.

Answer 3

Je pense que vous devez superposer dynamiquement une < input type = "text" > en haut du champ de mot de passe pour ce faire.

Answer 4

Vérifiez le code ci-dessous. Ajoutez simplement addPassClear("Password") à n'importe quel élément d'entrée pour lequel vous voulez cette fonctionnalité.

$(function() { 
$.fn.addPassClear = 
function(text) 
{ 
    return $(this).each(
    function() 
    { 
    $(this).focus(function(event){$(this).passFocusize(text); $(this).select(); }); 
    $(this).blur(function(event){$(this).passBlurize(text); }); 
    }); 
} 
$.fn.passFocusize = 
function(text) 
{ 
    return $(this).each(
    function() 
    { 
    if ($(this).val()==text && $(this).attr("type")=="text") 
    { 
     $(this).val(""); 
     this.type="password"; 
    } 
    }); 
}; 
$.fn.passBlurize = 
function(text) 
{ 
    return $(this).each(
    function() 
    { 
    if ($(this).val()=="") 
    { 
     $(this).val(text); 
     this.type="text"; 
    } 
    }); 
}; 
}; 

Answer 5

pourquoi tout ce long script? que le jus une tâche simple qui peut être fait avec une demi-ligne de code:

<input type='text' onclick="this.type='password',value=''" class='watever' value='password'..etc 

acclamations

Answer 6

Check In-champ Labels jQuery Plugin http://fuelyourcoding.com/scripts/infield/

Answer 7

Ma solution est proche de ce que Dan a fourni ci-dessus .

<script language="javascript" type="text/javascript"> 
    function SwapLabel(id, label, alttype) { 
     $(id).focus(function() { 
      if (this.value == label) { 
       this.value = ""; 
       if (this.type == 'text' && label == 'Password') { 
        this.type = alttype; 
       } 
      } 
     }); 
     $(id).blur(function() { 
      if (this.value == "") { 
       this.value = label; 
       if (this.type == alttype && label == 'Password') { 
        this.type = 'text'; 
       } 
      } 
     }); 
    } 
    $(document).ready(function() { 
     SwapLabel('#UserName', 'Username', ''); 
     SwapLabel('#Password', 'Password', 'password'); 
    }); 
</script> 

Une alternative serait ici d'omettre le paramètre « étiquette », et il suffit d'utiliser la valeur « titre », ce qui est essentiellement ce que labelify.js fait. Vous pourriez ajouter dans la partie de labelify qui applique ces gestionnaires d'événements à toutes les entrées de texte de type si vous le souhaitez. Ou télécharger labelify et ajoutez le code ci-dessous si nécessaire:

  if (this.type == 'text' && label == 'Password') { 
       this.type = alttype; 
      } 

      if (this.type == 'text' && label == 'Password') { 
       this.type = alttype; 
      } 

Le seul avantage mon extrait a plus labelify est qu'il comprend la réponse à votre question initiale:

Je me demande s'il est possible en quelque sorte à afficher l'étiquette "Mot de passe" comme texte (au lieu de ••••) dans le champ mot de passe?