觸發事件，當自動完成完成密碼輸入時

Question

我有一個簡單的登錄窗體，只要它們是空的，我想在字段中顯示標題。問題是，密碼類型不能被JS改變。

因此，當密碼字段爲空時，我接受了與密碼字段交換的第二個輸入。

問題是，如果用戶輸入用戶名並且瀏覽器自動完成密碼字段，密碼字段將不會顯示... 我該怎麼辦？

我的HTML，

<form name="login" method="post" action="/login" class="dialog form"> 
    <input type="submit" value="GO" /> 
    <div class="field"> 
     <input type="text" name="username" class="required" title="Username"/> 
    </div> 
    <div class="field"> 
     <input type="password" name="password" class="required" /> 
     <input type="text" value="Password" class="password-title" /> 
    </div> 
    <p class="clear">&nbsp;</p> 
</form> 

我的JS（需要的jQuery）：

 $("input[type=text]").each(function(){ 
      var input = $(this); 

      if(input.val() == "") input.val(input.attr('title')); 
      input.bind('click', function(){ 
       $(this).focus(); 
       if($(this).val() == $(this).attr('title')) $(this).val(""); 
      }); 
      input.bind('blur', function(){    
       if($(this).val() == "") $(this).val($(this).attr('title')); 
      }); 

     }); 

     $("input[type=password]").each(function(){ 
      var input = $(this); 
      var title = input.next('.password-title'); 

      if(input.val() == "" && title.length > 0){ 
       title.show(); 
       input.hide(); 
      } 

      title.bind('click', function(){ 
       title.hide(); 
       input.show(); 
       input.focus(); 
      }); 

      input.bind('blur', function(){ 
       if($(this).val() == ""){ 
        title.show(); 
        input.hide(); 
       } 
      }); 

      input.bind('DOMAutoComplete', function(){ 
       alert("dafuq"); //does not work (tested in Chromeium) 
      }); 

感謝您的幫助！

Answer 1

我推薦使用input元素的placeholder屬性來代替。詳細瞭解它：here。

Answer 2

input.bind('change', function(){ 
    title.hide(); 
    input.show(); 
    input.focus(); 
});