Justin Hoffman Chicago Drupal WordPress Web Developer

Do you need a fast easy way to add default text in your form input text fields? Here's a quick solution with jQuery. First make a text field.

<form id="form">
	<input type="text" id="textfield" />
</form>

Then add the javascript after the jQuery file.

(function ($) {
$(document).ready(function(){
	// add input info words to fields
	$('#textfield').focusWord('Enter text here');
	$('#form').submit(function() {
		$(this).find('input.default-text').each(function() {
			// remove default text from fields
			$(this).val('');
		});
	});
});

$.fn.focusWord = function(word) {
	// only put in default if no previous value
	if (this.val() == '') {
		this.val(word);
	}

	// focus and blur for words
	this.focus(function() {
		if ($(this).val() == word) {
			$(this).val('').removeClass('default-text');
		}
	}).blur(function() {
		if ($(this).val() == word || $(this).val() == '') {
			$(this).val(word).addClass('default-text');
		}
	});

	return this;
}
}(jQuery));

It's that easy. You're done.