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. Так что это не относится к пустому утверждению. По какой-то причине он обрабатывает ввод как пустой, даже если я ввел пароль.

Что я здесь не так делаю?

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">

Если вы хотите реализовать это для устаревших браузеров, вам придется перенести проверку в событие 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
        });                     
    }
});