Text Box Watermarks with Javascript

Providing a descriptive value in a text field in a form can be a useful method of guiding users on your web site. It's not that hard, but it can be repetitive. In this tutorial, we'll use Javascript to help with the task.

We'll create a couple functions to include in your shared function library that will help you accomplish the task on any page with just one line of code.

A couple arrays

We're going to set up a global array to keep track of our watermarked objects and their values. These two lines appear before the function body, not within.

var watermarkObj = new Array();
var watermarkVal = new Array();

Now that we have those declared, we'll declare our main function.

watermark(id, value)

This function will set up our watermark and attach events to do all the work for us. Here is the code:

function watermark(id, value) {

	// Get object
	// uses "get" function from our shared library
	var box = get(id);
 
	// Setup clear function
	box.onfocus = function() {
		if (this.value == value)
			this.value = "";
	}
 
	// Setup autofill function
	box.onblur = function() {
		if (this.value == "")
			this.value = value;
	}
 
	// Set initial value
	if (box.value == "")
		box.value = value;
		
	// Add to array
	watermarkObj[watermarkObj.length] = id;
	watermarkVal[watermarkVal.length] = value;
}

The function works by setting up two events for the given object. One to run when the object receives focus (onfocus), and the other to run when the object loses focus (onblur). These are known as anonymous functions because no name is given to refer to them.

clearDefaults()

Next, we'll add a function that will allow us to remove the unwanted watermark text before a form operation, such as submit. You will have to run this code manually from another function. You could also set this up to run onsubmit using the same anonymous function technique used above.

function clearDefaults() {
	
	/* Call this function to clear
	   all default values (such as
	   before submitting a form) */

	for (var i = 0; i < watermarkObj.length; i++) {
		var obj = get(watermarkObj[i]);
		if (obj.value == watermarkVal[i])
			obj.value = "";
	}
}

setDefaults()

We'll also need a function to set the default values back to their original specification. This is useful when you're doing some AJAX calls.

function setDefaults() {
	
	/* Call this function to reset all
	   blank fields to their
	   watermark values */
	
	for (var i = 0; i < watermarkObj.length; i++) {
		var obj = get(watermarkObj[i]);
		if (obj.value == "") 
			obj.value = watermarkVal[i];
	}
}

In practice

The complete code listing:

var watermarkObj = new Array();
var watermarkVal = new Array();

function watermark(id, value) {
	
	// Get object
	var box = get(id);
	
	// Setup clear function
	box.onfocus = function() {
		if (this.value == value)
			this.value = "";
	}
	
	// Setup autofill function
	box.onblur = function() {
		if (this.value == "")
			this.value = value;
	}
	
	// Set initial value
	if (box.value == "") {
		box.value = value;
	}

	// Add to arrays
	watermarkObj[watermarkObj.length] = id;
	watermarkVal[watermarkVal.length] = value;
}

function clearDefaults() {
	
	/* Call this function to clear all
	   default values (such as before
	   submitting a form) */

	for (var i = 0; i < watermarkObj.length; i++) {
		var obj = get(watermarkObj[i]);
		if (obj.value == watermarkVal[i])
			obj.value = "";
	}
}
	
function setDefaults() {
	
	/* Call this function to reset all
	   blank fields to their
	   watermark values */
	
	for (var i = 0; i < watermarkObj.length; i++) {
		var obj = get(watermarkObj[i]);
		if (obj.value == "")
			obj.value = watermarkVal[i];
	}
}

Put this code after the other functions to set up a watermark for the text field named "txtName":

window.onload = function() { 	 	

	// Set up a watermark
	watermark("txtName","Enter your name");
}

I hope you learned something new, enjoy!

Trackback URL: http://elijahtaylor.com/trackback/ca5265bf-4019-4513-bdcf-4c25b6eb3040/Text-Box-Watermarks-with-Javascript.aspx

Comments
Blog post currently doesn't have any comments.
Leave comment



 Security code

details


This web site uses Kentico CMS, the content management system for ASP.NET developers.