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
