Jquery 如果密码字段为空

Question

我正在尝试将可见文本添加到显示“输入密码”的密码字段中，单击后文本将被清除，您可以键入点。我有两个输入，一个是 type=text，另一个是密码。密码输入从一开始就隐藏，但在您单击带有“输入密码”指令的输入后出现。

它执行此 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 输入将显示。所以它不尊重 ifempty 语句。由于某种原因，即使我输入了密码，它也会将输入视为空。

我在这里做错了什么？

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