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

Jquery attr() - Mozilla behaves differently regarding the design (differenty font-family or font-size?)

本文关键字：字体 系列 attr Mozilla 面表 设计方 Jquery      更新时间：2023-09-26

我正在做登录表单。

这是我在CodeIgnitor中的观点：

<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功能，删除占位符并再次放置它工作正常）吗？

谢谢。。。

。这是演示。

不幸的是，我无法在此处设置JS功能（因此当用户单击时，密码将为空。 neverthelss，我的问题可见，如果您在Mozilla nad中查看此演示，例如Chrome。

谢谢，非常感谢，但我的主要问题是为什么在Mozilla中"Passowrd"这个词看起来比"电子邮件地址"这个词轻，而在例如Chrome中，这两个词看起来是一样的。请查看演示

因为电子邮件是用值设置的，密码是占位符。

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

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

相关文章：