title: Jquery if password field is empty
body: <p>I'm trying to add visible text to a password field that says "Enter a password" and on click the text is cleared and you type dots. I have two inputs one of type=text and another password. The password input is hidden from the start but appears after you click on the input with the "Enter a password" instruction. </p>
  
  <p>It does this <a href="http://mudge.github.com/jquery_example/" rel="noreferrer">http://mudge.github.com/jquery_example/</a> but I'm trying to make it for password fields.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;input type="text" id="password_instructions" /&gt;
  &lt;input type="password" id="password" /&gt; 
  </code></pre>
  
  <p>The Jquery</p>
  
  <pre><code>        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
                      });                     
                  }
          });
  </code></pre>
  
  <p>What doesn't work: </p>
  
  <p>When you fill the password input (with dots appearing) and click out the input is hidden and the #password_instruction input shows. So it's not respecting the if empty statement. For some reason it treats the input as empty even if I typed a password in.</p>
  
  <p>What am I doing wrong here?</p>