Jquery si el campo de contraseña está vacío

Question

Estoy tratando de agregar texto visible a un campo de contraseña que dice "Ingresar una contraseña" y al hacer clic el texto se borra y escribe puntos. Tengo dos entradas, una de tipo = texto y otra contraseña. La entrada de contraseña está oculta desde el principio, pero aparece después de hacer clic en la entrada con la instrucción "Ingresar una contraseña".

Hace esto http://mudge.github.com/jquery_example/ pero estoy tratando de hacerlo para los campos de contraseña.

HTML

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

El 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 
        });      
       } 
     }); 

lo que no funciona:

Al rellenar la introducción de la contraseña (que aparece con puntos) y haga clic en la entrada está oculta y la entrada #password_instruction muestra. Entonces no está respetando la declaración if empty. Por alguna razón, trata la entrada como vacía incluso si ingresé una contraseña.

¿Qué estoy haciendo mal aquí?

Answer 1

Parece que esperas que haya algún tipo de "pausa" después de llamar al focus() y que el resto del código JS se ejecutará solo cuando el usuario final termine de escribir la contraseña de alguna manera.

Esto no es cierto. La función se ha ejecutado completamente de una vez.

Necesitas movimiento el siguiente fragmento

 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 
      });      
     } 

en otra función independiente:

$('#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

Qué quiere decir:

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

Si usted está deseando implementar esto para pierna navegadores acy, tendrá que mover el cheque al evento onBlur. En jQuery, esto se ve así:

$('#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 
     });      
    } 
});