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

Question

довольно сам пояснительный ...

Answer 1

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

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

Answer 2

Сделайте свой пароль текстовое поле типа "текст":

<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