jQuery – Clear Default Input Values Once

By voidet on April 30, 2010, 6,531 views

I like to have default values in my text input fields. However it is an annoying user experience to have to manually clear the value out and then enter in the value. Instead I thought I would write a simple script that would work site wide to clear out the default values. You of course will need your jquery included:

Following some brilliant comments on this there is a much quicker method:

$('input[type=text]').one('focus', function(){
	$(this).attr('value', '');
});

However the original code I came up with is as follows:

$(function(){
	$('input[type=text]').focus(function(){
		if (!this.clicked) {
			$(this).attr('value', '');
			this.clicked = true;	
		}
	});
});

This will clear the fields out only once. So if the user enters a value, then focuses back on the field, their values won’t be cleared. So if they needed to edit a single letter, then their entire entry won’t be wiped. If you have any hints feel free to comment