Question

我正在登录表单。

这是我在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我尝试确保以下功能：

如果用户点击了passoword字段，则该字段变为空（准备让用户写入他/她的密码）。如果用户没有写入他/她的密码并在其他地方点击，则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;  
}

问题是所有这些（电子邮件和passowrd字段看起来一样）在Chrome和IE10中运行良好，但在Mozilla中它们看起来不同。颜色是相同的，但密码字母的字母似乎是较小或不同的字体，因此这两个字段看起来不同而且很难看。

任何想法为什么Mozilla在设计方面表现不同（JS功能，重新放置占位符并再次放置它）？

谢谢...

......这是DEMO。

不幸的是，我无法在这里设置JS功能（所以当用户点击时，密码就会变空。如果你在Mozilla nad中检查这个DEMO，例如Chrome，那么我的问题是可见的。

Answer 1

非常感谢，但我的主要问题是为什么在Mozilla中会出现＃34; Passowrd＆＃34;看起来比单词＆＃34;电子邮件地址＆＃34;更轻，而在例如Chrome中，两个单词看起来都一样。请查看DEMO

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

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

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

Jquery attr（） - Mozilla在设计上有不同的表现（不同的font-family或font-size？）

1 个答案: