jquery - 如何使用 Jquery 的 Coolinput 在密码字段中显示提示 "Enter your password"，然后在用户键入时使用星号隐藏输入？

Question

非常不言自明...

Answer 1

将密码文本框设置为“text”类型:

<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