input field placeholder in jQuery
- by Hristo
I'm trying to create a Login page, not worrying about actually logging in yet, but I'm trying to achieve the effect where there is some faded text inside the input field and when you click on it, the text disappears or if you click away the text reappears.
I have this working for my "Username" input field, but the "Password" field is giving me problems because I can't just do $("#password").attr("type","password"). Here's my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- Links -->
<link rel="stylesheet" type="text/css" href="style.css" />
<!-- Scripts -->
<script type="text/javascript" src="jQuery.js"></script>
<script>
// document script
$(document).ready(function(){
// login box event handler
$('#login').click(function(){
$('.loginBox').animate({
height: '150px'
},
'1000'
);
$('#username').show();
// add pw placeholder field
$('#password').after('<input type="text" id="placeHolder" value="Password" class="placeHolder" />');
$('#password').hide();
});
// username field focus and blur event handlers
$('#username').focus(function() {
if($(this).hasClass('placeHolder')){
$(this).val('');
$(this).removeClass('placeHolder');
}
});
$('#username').blur(function() {
if($(this).val() == '') {
$(this).val('Username');
$(this).addClass('placeHolder');
}
});
// password field focus and blur event handlers
$('#placeHolder').focus(function() {
$('#placeHolder').hide();
$('#password').show();
$('#password').focus();
});
$('#password').blur(function() {
if($('#password').val() == '') {
$('#placeHolder').show();
$('#password').hide();
}
});
});
</script>
</head>
<body>
<div id="loginBox" class="loginBox">
<a id="login">Proceed to Login</a><br />
<div id="loginForm">
<form>
<input type="text" id="username" class="placeHolder" value="Username" />
<input type="password" id="password" class="placeHolder" value="" />
</form>
</div>
</div>
</body>
</html>
Right now, I can click on the password input box and type in it, but the text is not disappearing and the "type" doesn't get set to "password"... the new input field I create isn't being hidden, it just stays visible, and I'm not sure where the problem is. Any ideas?
Thanks,
Hristo
