JQuery焦点在firefox中的密码字段上很奇怪

Question

我使用用户名和密码创建了一个登录表单。 用户名和密码字段具有占位符。我通过使用Jquery删除焦点上的文本框值来修复IE无法识别占位符属性的问题。为了密码，我创建了一个隐藏的输入类型=密码文本框，我创建了一个文本框，其输入类型为= text = value =“password”，单击它时会隐藏，并显示密码字段。 这是表单的HTML代码：

<form method="post" action="check.php">
    <input type="text" class="login-textbox" id="enter-username" placeholder="Username" maxlength="50"/>
    <input type="text" class="login-textbox" id="password-placeholder" placeholder="Password" maxlength="50"/>
    <input type="password" class="login-textbox" id="enter-password" maxlength="50"/>
    <input type="submit" class="button" value="Login" />
</form>

这是JQuery代码：

$(function(){
    $("#enter-username").val("Username");

    $("#password-placeholder").val("Password");

    $("#enter-username").focus(function(){
        if($(this).val()=="Username"){
            $(this).val("");$(this).css("color","#000000");
        }
        $(this).css("border","2px solid #00A2E8");
    });

    $("#enter-username").blur(function(){
        if($(this).val()==""){
            $(this).val("Username");$(this).css("color","#808080");
        }
        $(this).css("border","2px solid #D8D8D8");
    });

    $("#password-placeholder").focus(function(){
        $(this).hide();$("#enter-password").show();
        $("#enter-password").focus();
    });

    $("#enter-password").focus(function(){
        $("#enter-password").css("border","2px solid #00A2E8");
    });

    $("#enter-password").blur(function(){
        if($(this).val()==""){
            $(this).hide();$("#password-placeholder").show();
        }
        $(this).css("border","2px solid #D8D8D8");
    });
});

这适用于chrome和Internet Explorer，但在firefox上，当我点击（焦点）密码文本框时，密码字段会显示文本。像这样：

点击密码字段时，密码字段应为空。谁知道我该如何解决这个问题？

Answer 1

因为您要为input

设置值

$("#enter-username").val("Username");
$("#password-placeholder").val("Password");

删除这些行，您的代码就可以正常工作。

同时将密码输入字段的类型从text更改为password，如

<input type="password" class="login-textbox" id="password-placeholder" placeholder="Password" maxlength="50"/>

Fiddle

---

<强>更新

将代码更改为

$("#enter-password").focus(function () {
    if ($(this).val() == "Password") {
        $(this).val("");
        $(this).css("color", "#000000");
    }
    $(this).css("border", "2px solid #00A2E8");
});

$("#enter-username").focus(function () {
    if ($(this).val() == "Username") {
        $(this).val("");
        $(this).css("color", "#000000");
    }
    $(this).css("border", "2px solid #00A2E8");
});

Fiddle