Text Box Watermarks with Javascript
Monday, June 04, 2007, 9:57 AM
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!