Как я могу использовать Coolinput от Jquery, чтобы показать подсказку «Введите свой пароль» в поле пароля, но затем использовать звездочки, чтобы скрыть ввод при вводе пользователем?

Question

довольно понятно ...

Answer 1

Создайте текстовое поле вашего пароля типа «текст»:

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

Затем используйте следующий скрипт:

$(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();
});

Что он делает так: когда фокус получен, текстовое поле изменяется на поле пароля, а когда фокус теряется, он возвращается к обычному текстовому полю (поэтому текст подсказки читается), если, конечно, что-то введено в текстовое поле.

Я на самом деле не проверял это, но если он не будет работать правильно, по крайней мере, он укажет вам направление движения.

EDIT:

Кажется, вы не можете изменить тип текстового поля с помощью javascript, поэтому вот обходной путь:

 <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();
     }
   });

});

Вы можете увидеть это в действии здесь: http://jsbin.com/iniza

Answer 2

Может быть, вы можете использовать плагин jquery impromptu, перейдите по ссылке для подробного объяснения ... в двух словах, вы будете использовать стандартный тип ввода пароля.

Экспромт

Примерно так:

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 }
});