jQuery: Changing the default text value on focus, and showing plain text in a password field

This is a complete working example of the tutorials posted below, which show how to change the default text value in an HTML form text field on focus, and how to toggle between a regular password field and and plain text field with a default value.

Working Example

HTML/CSS/Javascript Source

Here's the full source for what you need to make this work

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html>
<head>
<script language="javascript" src="/js/jquery-1.3.2.min.js"></script>
<script language="Javascript">
$(document).ready(function() {
	$('#password-clear').show();
	$('#password-password').hide();
	$('#password-clear').focus(function() {
		$('#password-clear').hide();
		$('#password-password').show();
		$('#password-password').focus();
	});
	$('#password-password').blur(function() {
		if($('#password-password').val() == '') {
			$('#password-clear').show();
			$('#password-password').hide();
		}
	});
	$('.default-value').each(function() {
		var default_value = this.value;
		$(this).focus(function() {
			if(this.value == default_value) {
				this.value = '';
			}
		});
		$(this).blur(function() {
			if(this.value == '') {
				this.value = default_value;
			}
		});
	});
});
</script>
<style type="text/css">
#password-clear {
    display: none;
}
</style>
</head>
<body>
<form>
<div>
    <input class="default-value" type="text" name="email" value="Email Address" />
</div>
<div>
    <input id="password-clear" type="text" value="Password" autocomplete="off" />
    <input id="password-password" type="password" name="password" value="" autocomplete="off" />
</div>
</form>
</body>
</html>