I'm currently working on a sign-in page and implementing JQuery. Everything seems to be functioning properly except for a minor issue. The problem is that when the password field gains focus, it creates extra space in IE 8 and later versions only.
The main goal is to prevent the creation of space when the password field gains focus on IE 8 during sign-in.
Here are some images to illustrate the issue:
Before the mouse is focused [IE 8].
After the mouse is focused [IE 8].
Here is my HTML code:
<input name="ctl00$logInBox$UserName" type="text" maxlength="256" id="ctl00_logInBox_UserName" class="userName" autocomplete="off" placeholder="Username" />
<input name="ctl00$logInBox$Password_TXT" type="text" maxlength="256" id="ctl00_logInBox_Password_TXT" class="password" autocomplete="off" value="Password" style="display:none" />
<input name="ctl00$logInBox$Password" type="password" maxlength="256" id="ctl00_logInBox_Password" class="password" autocomplete="off" value="" />
And here is the JQuery code for this:
<script type="text/javascript">
$(document).ready(function () {
$('#ctl00_logInBox_Password').hide();
$('#ctl00_logInBox_Password_TXT').show();
$('#ctl00_logInBox_Password_TXT').focus(function () {
$(this).hide();
$('#ctl00_logInBox_Password').show().focus();
});
$('#ctl00_logInBox_Password').blur(function () {
if ($(this).val() == "") {
$(this).hide();
$('#ctl00_logInBox_Password_TXT').show();
}
});
});
</script>
Here is the CSS portion:
.login .field input.userName, .login .field input.password {
background: none repeat scroll 0 0 #e9e9e9;
border: 1px solid #e4e4e4;
width: 18.3em !important; /*width value changed by sakthivel*/
display: inline-block;
line-height: 1.4 !important;
font-size: 15px !important;
width: 309px !important;
padding: 5px 8px 6px !important;
color: #808080;
}