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
