如何使用Jquery的Coolinput在密码字段中显示提示“输入密码”,然后在用户输入时使用星号隐藏输入?

时间:2009-06-10 16:43:47

标签: jquery input hide

非常自我解释......

2 个答案:

答案 0 :(得分:5)

设置“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

答案 1 :(得分:0)

也许您可以使用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 }
});
相关问题