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