0

我正在做登录表单。

这是我在 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 功能（因此，当用户单击时，输入的密码将为空。不过，我的问题是可见的，如果您在 Mozilla nad 例如 Chrome 中查看此演示。

4

1 回答 1

1

非常感谢，但我的主要问题是为什么在 Mozilla 中“Passowrd”这个词看起来比“Email Address”这个词轻，而在 Chrome 中，这两个词看起来一样。请查看演示

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

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

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

于 2013-11-04T14:56:49.697 回答