jQuery: Changing the default text value on focus, and showing plain text in a password field Part 1
Posted January 5th, 2010 in Javascript (Updated March 31st, 2010)
Last year I posted a couple of jQuery articles about how to change the default text value on focus and show plain text in a password field and then make it a regular password field on focus, with examples in the pages about how to do it. I did not post a full standalone working example which someone requested a couple of days ago, so follow those posts up here with a full standalone example.
Full example
The full example is as follows below. This full working example can be found by clicking here along with the same source code illustrated below.
<!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>
Doing it without modifying the HTML form
There may be circumstances when you can add Javascript/jQuery to the page but not modify the HTML template so everything needs to be done in Javascript. I show how to do this in part 2 of this post.
Related posts:
- jQuery: show plain text in a password field and then make it a regular password field on focus - Part 2 (Tuesday, March 30th 2010)
- jQuery: show plain text in a password field and then make it a regular password field on focus (Tuesday, June 2nd 2009)
- Changing the default text value on focus with jQuery (Friday, May 29th 2009)
Share or Bookmark
Share or Bookmark this page using the following services. You will need to have an account with the selected service in order to post links or bookmark this page.
Subscribe or Follow
Subscribe via RSS or email, or follow me on Facebook or Twitter below. The RSS icon takes you through to Feedburner where you can select the service or application to use.

