如果密碼字段爲空，則爲jquery

Question

我正在嘗試將可見文本添加到說「輸入密碼」的密碼字段中，並且在單擊該文本時清除並鍵入點。我有兩個輸入類型=文本和另一個密碼。密碼輸入在開始時隱藏，但在用「輸入密碼」指令單擊輸入後出現。

它這樣做http://mudge.github.com/jquery_example/但我試圖使它的密碼字段。

HTML

<input type="text" id="password_instructions" /> 
<input type="password" id="password" /> 

jQuery的

 var $password = $('#password'); 
     $password.hide(); //hide input with type=password 

     $("#password_instructions").click(function() { 
       $(this).hide(); 
       $('#password').show(); 
       $('#password').focus(); 

       if ($password.val().length === 0) { //if password field is empty    
        $password.focusout(function() { //when clicking outside empty password input 
         $(this).hide(); 
         $('#password_default_value').show(); 
         $('#password_instructions').default_value('Enter a password'); //will clear on click 
        });      
       } 
     }); 

什麼不起作用：

當您填寫的密碼輸入（用點顯示），然後單擊出來的輸入是隱藏的， #password_instruction輸入顯示。所以它不尊重if語句。由於某種原因，即使我輸入了密碼，它仍將輸入視爲空。

我在這裏做錯了什麼？

Answer 1

您似乎預計在撥打focus()之後會出現某種「暫停」，並且只有當最終用戶輸入完密碼後纔會執行JS代碼的剩餘部分。

這是不正確的。該功能一次完全執行。

您需要移動下面這段

 if ($password.val().length === 0) { //if password field is empty    
      $password.focusout(function() { //when clicking outside password input 
       $(this).hide(); 
       $('#password_default_value').show(); 
       $('#password_instructions').default_value('Enter a password'); //will clear on click 
      });      
     } 

到另一獨立功能：

$('#password').focusout(function() { 
    if ($(this).val().length === 0) { //if password field is empty    
     $(this).hide(); 
     $('#password_default_value').show(); 
     $('#password_instructions').default_value('Enter a password'); //will clear on click 
    } 
}); 

Answer 2

你的意思是：

<input type="password" placeholder="enter password"> 

如果你想爲腿做到這一點acy瀏覽器，您必須將支票移至onBlur事件。在jQuery中，這看起來像：

$('#password').blur(function() { 
    if ($password.val().length === 0) { //if password field is empty    
     $password.focusout(function() { //when clicking outside password input 
      $(this).hide(); 
      $('#password_default_value').show(); 
      $('#password_instructions').default_value('Enter a password'); //will clear on click 
     });      
    } 
});