Comment puis-je utiliser le Coolinput de Jquery pour afficher l'indice "Entrez votre mot de passe" dans un champ de mot de passe, puis utiliser les étoiles pour masquer l'entrée lorsque l'utilisateur tape?

Question

assez explicite ...

Answer 1

Peut-être que vous pouvez utiliser jquery plugin impromptu, suivez le lien pour une explication détaillée ... en un mot, vous seriez en utilisant le mot de passe type d'entrée d'un formulaire.

Impromptu

Quelque chose comme ceci:

var txt = 'Enter your password:<br /> 
     <input type="password" id="jPassword" 
     name="jPassword" value="" />'; 

function mycallbackform(v,m,f){ 
    if (v){ 
     $.prompt('your password is of '+ f.jPassword.length + 'characters'); 
    } 
} 

$.prompt(txt,{ 
     callback: mycallbackform, 
     buttons: { Accept: true, Cancel: false } 
}); 

Answer 2

Faites votre champ de saisie de mot de passe de type "texte":

<input type="text" alt="Enter Password" name="PWD" /> 

Ensuite, utilisez le script suivant:

$(function() { 
    $("input[name=PWD]") 
     .focus(function() { $(this).attr("type","password"); }) 
     .blur(function() { 
      if ($(this).val()) // check if you entered something 
      $(this).attr("type","text"); 
     }) 
     .coolinput(); 
}); 

Ce qu'il fait est: quand le focus est reçu, la zone de texte est changée en boîte de mot de passe, et quand le focus est perdu, il retourne à une zone de texte normale (ainsi le texte d'indice est lisible) la boîte de texte.

Je n'ai pas réellement testé cela, mais si cela ne fonctionne pas correctement, cela vous indiquera au moins la direction à prendre.

EDIT:

Il semble que vous ne pouvez pas changer le type d'une zone de texte en utilisant javascript, alors voici une solution:

<input id="PWD1" name="PWD1" value="Enter password"/> 
<input id="PWD2" name="PWD2" type="password" style="display:none" /> 

Javascript:

$(function() { 
    $("#PWD1").focus(function() { $("#PWD2").show().focus(); $("#PWD1").hide(); }); 
    $("#PWD2").blur(function() { 

    if ($(this).val().length == 0) { 
      $("#PWD1").show(); 
      $("#PWD2").hide(); 
    } 
    }); 

}); 

Vous pouvez le voir en action ici: