Jquery, jeśli pole hasła jest puste

Question

Próbuję dodać widoczny tekst do pola hasła z napisem "Wprowadź hasło", a po kliknięciu tekst zostanie wyczyszczony i wpiszesz kropki. Mam dwa wejścia jednego z typów = tekst i inne hasło. Wprowadzanie hasła jest ukryte od początku, ale pojawia się po kliknięciu wejścia za pomocą instrukcji "Wprowadź hasło".

Czyni to http://mudge.github.com/jquery_example/, ale próbuję zrobić to dla pól hasła.

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

Co nie działa:

Po wypełnieniu wejście hasło (z kropki pojawiające się) i kliknij na wejście jest ukryte i wyświetlane jest wejście #password_instruction. Więc nie jest to zgodne z pustym stwierdzeniem. Z jakiegoś powodu traktuje dane wejściowe jako puste, nawet jeśli wpisałem hasło.

Co ja tu robię źle?

Answer 1

Wygląda na to, że spodziewasz się pewnego rodzaju "pauzy" po wywołaniu focus(), a resztka kodu JS zostanie wykonana dopiero po zakończeniu pracy przez użytkownika końcowego.

To nie jest prawda. Funkcja została wykonana całkowicie za jednym razem.

Trzeba ruchu następujący fragment

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

do inny samodzielną funkcję:

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

masz na myśli:

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

Jeśli chce zaimplementuj to dla nogi acy browsers, będziesz musiał przenieść czek do zdarzenia onBlur. W jQuery wygląda to następująco:

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