Jquery if password field is empty

Question

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.

It does this http://mudge.github.com/jquery_example/ but I'm trying to make it for password fields.

HTML

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

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

What doesn't work:

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.

What am I doing wrong here?

Answer 1

You seem to be expecting that there's some kind of "pause" after you call focus() and that the remnant of the JS code will be executed only when the enduser is finished typing the password somehow.

This is not true. The function is been executed fully in one go.

You need to move the following piece

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

into another standalone function:

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

Do you mean:

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

If you are wanting to implement this for legacy browsers, you'll have to move the check to the onBlur event. In jQuery this looks like:

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