jquery - How can I use Jquery's Coolinput to show the hint "Enter your password" in a password field, but then use stars to hide the input when user types?

Question

pretty self explanatory...

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

它的作用是：当接收到焦点时，文本框变为密码框，当焦点丢失时，它返回到普通文本框（因此提示文本是可读的），当然除非在文本框。

我实际上并没有对此进行测试，但如果它不能正常工作，至少它会为你指明方向。

编辑：

看来您无法使用 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

Maybe you can use jquery impromptu plugin, follow the link for a detailed explanation... in a nutshell, you would be using a form's standard input type password.

Impromptu

Something like this:

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