如果密码字段为空，则为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 
     });      
    } 
});