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

Question

我做了一个带有用户名和密码的登录表单。 用户名和密码字段包含占位符。我解决了IE不能识别占位符属性的问题，通过使用Jquery删除焦点上的文本框值。并为密码我做了一个隐藏的输入类型=密码文本框，并且我创建了一个输入类型= 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