I'm currently working on the login form.
Below is my view in 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>
My goal with JavaScript is to achieve the following functionality:
When a user clicks on the password field, it should become empty for them to input their password. If the user does not enter their password and clicks away, the field should display the placeholder "Password" again.
Here is the JavaScript code that accomplishes this:
$(':password').focusin(function(){
if ($(this).attr('placeholder') !== undefined){
$(this).removeAttr('placeholder')
}
});
$(':password.password').focusout(function(){
$(this).attr('placeholder', 'Password');
})
In addition, there is CSS that controls the color of the placeholder text (matching the input field color, #999999 in this case).
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;
}
THE ISSUE IS that although the email and password fields appear consistent in Chrome and IE10, they look different in Mozilla. The color matches, but the font or size of the password field seems off, resulting in an inconsistent appearance.
Any insights as to why Mozilla displays the design differently (even though the JS functionality works fine)?
Thank you for your help...
You can also view the DEMO here.
Unfortunately, I cannot demonstrate the JS functionality at the moment, but you can see the issue by checking out the demo in both Mozilla and Chrome, for example.