brihol44
asked on
Looking to solve input placeholder IE 8 compatibility issue.
I have the following implemented and it's not quite working correctly. And you can only see my solution in IE 8 as it checks if placeholder is compatible because IE 8 doesn't have support for the "placeholder" attribute and I'm trying to figure out a way to solve the issue so that it works in IE 8. You can see what I've started but the last remaining piece is when you focus on the password field it should change the input type to "password" and if you unfocus out of the field with no entry it should default back to "text" input type only if the val = "" or the user didn't actually enter anything. If there's a more streamlined way of what I've already done please share as well. Thx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
jQuery(function() {
jQuery.support.placeholder = false;
test = document.createElement('input');
if('placeholder' in test) jQuery.support.placeholder = true;
});
$(function() {
if(!$.support.placeholder) {
var active = document.activeElement;
var pass = $('<input id="password" class="textbox" name="password" placeholder="Password" type="text">');
$("#password").replaceWith(pass);
$(':text').focus(function () {
if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
$(this).val('').removeClass('hasPlaceholder');
}
}).blur(function () {
if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
$(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
}
});
$(document).on('focus click', '#password', function () {
var pass = $('<input id="password" class="textbox" name="password" placeholder="Password" type="password">');
$("#password").replaceWith(pass);
});
}
$(active).focus();
$(':text').blur();
$('form:eq(0)').submit(function () {
$(':text.hasPlaceholder').val('');
});
});
</script>
<style>
input {width: 150px;}
</style>
</head>
<body>
<input id="login_id" class="textbox" name="login_id" placeholder="Username" type="text" /><br>
<input id="password" class="textbox" name="password" placeholder="Password" type="password">
</body>
</html>ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER