javascript - Jquery attr() - Mozilla 在设计方面表现不同(不同的字体系列或字体大小？)

Question

我正在做登录表单。

这是我在 CodeIgnitor 中的 View :

<div id="login-form">
<?php
    echo heading('Login', 2);
    echo form_open('login/login_user');
    echo form_input('email', set_value('email', 'Email Address'));
    echo br();
    echo form_password('password', '', 'placeholder="Password" class="password"');
    echo br(2);
    echo form_submit('submit', 'Login');
    echo form_close();
    echo validation_errors('<p class="error">');
    ?>
</div>

我尝试使用 JavaScript 确保以下功能:

如果用户点击密码字段，该字段将变为空(用户可以输入他/她的密码)。如果用户没有写他/她的密码并点击其他地方，passowrd 字段再次获得占位符密码。

这是执行此操作的 JavaScript 代码:

$(':password').focusin(function(){
    if ($(this).attr('placeholder') !== undefined){
        $(this).removeAttr('placeholder')
    }
});

$(':password.password').focusout(function(){
    $(this).attr('placeholder', 'Password');
})

还有一个 CSS 控制占位符字符串的颜色(它使它与输入字段的颜色相同，在我的例子中是 #999999)。

input[type=text],
input[type=password] {
    display: block;
    padding: 3%;
    color: #999999;
    margin: 0 0 1% 0;
    width: 90%;
    border: none;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background: #202020;
}

::-webkit-input-placeholder {
   color: #999999;
}

:-moz-placeholder { /* Firefox 18- */
   color: #999999;
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #999999;
}

:-ms-input-placeholder {  
    color: #999999;  
}

问题是所有这些(电子邮件和密码字段看起来一样)在 Chrome 和 IE10 中运行良好，但在 Mozilla 中它们看起来不同。颜色是一样的，但是密码字段的字母好像变小了或者字体不一样，所以两个字段看起来不一样，很丑。

知道为什么 Mozilla 在设计方面表现不同(JS 功能，删除占位符并重新放置它可以正常工作)吗？

谢谢...

... 这是 DEMO .

不幸的是，我无法在此处设置 JS 功能(这样当用户单击时，输入的密码将变为空。无论如何，如果您在 Mozilla nad 例如 Chrome 中查看此演示，我的问题是显而易见的。

Answer 1

Thanks, a lot, but my main question is why in Mozilla the word "Passowrd" looks lighter than the word "Email Address", while in for example Chrome, both words look the same. Please check out the DEMO

因为email设置了值，密码是占位符。

    <input 
        type="text" 
        name="email" 
        value="Email Address"/>  <--------- Value
    <input 
        type="password" 
        name="password" 
        value=""         
        placeholder="Password" <--------- Placeholder
        class="password"/>

电子邮件的文本颜色应该是文本框的默认颜色。