Pro Tip – Polishing Up Your Text Boxes

Introduction

Have you ever been to a website that has simple instructions in the text boxes to let you know what you need to enter into the text box? The text in the box is usually a light unobtrusive color and it disappears as soon as you place your cursor in the text box.

This technique adds a very user-friendly and polished look to your text boxes. In this article we’ll explore how to use a little JavaScript and define a text box to get that effect.

Defining the TextBox

Our first step is to define the input tag for our text box. We’ll need to not only define the basic text box attributes but some special ones as well. In the examples to follow we are setting up a simple search text box for our website where users input their keywords.

	<input name="Keyword_TextBoxSearch" type="text" value="Enter search keywords" id="TextBoxSearch"
class="DefaultStyle" onblur="textboxOnBlur('TextBoxSearch','Enter search keywords','ActiveStyle',' DefaultStyle')"
onfocus="textboxOnFocus('TextBoxSearch','Enter search keywords','ActiveStyle')" />

Now, here’s a simple breakdown of all of the pieces in this tag:

• The name, type and value tags are all very standard and basic attributes of input so we won’t cover them here.
• The id attribute is used to uniquely identify the text box on the page and it is necessary in order for our functions to be able to manipulate the text box.
• The class attribute is set to our default style in our Cascading Style Sheet. As a general rule your default style should be the same as your standard style except for the color being lighter, e.g. Black for standard style (which I named “ActiveStyle” in the example) and Silver for the default text style. If you have never used CSS before there are some helpful CSS tutorials on HtmlGoodies.com.
• The onblur attribute handles the behavior of the text box when it’s not being used (doesn’t have focus). We set this attribute to use a JavaScript function named “textboxOnBlur” that we will discuss later. The function requires 4 parameters: the id name of the text box, the default text you want to display, the CSS style for the “active” standard look, and the CSS style for the default text look.
• The onfocus attribute handles the behavior of the text box when a user clicks on or tabs to the text box to start typing. We set this attribute to use a JavaScript function named “textboxOnFocus” that we will discuss later. This function requires only 3 parameters: the id name of the text box, the default text you want to display, and the CSS style for the “active” standard look.

Handling Focus

Our next step is to create a simple JavaScript function that handles clearing your text box as soon as it has focus (i.e. the user clicks on or tabs to the text box). Here is the script to handle that:

function textboxOnFocus(elementId, defaultText, classActive)
{
   if (document.getElementById(elementId).value == defaultText)
   {
      document.getElementById(elementId).className = classActive;
      document.getElementById(elementId).value = '';
   }
}

The function receives 3 parameters: the id name of the text box, the default text you want to display, and the CSS style for the “active” standard look. We then check to see if the text in the text box is the default text. If it is we simply change the CSS style from default to “active” and clear the text box so that the user can enter their text.

Handling Blur

Handling onblur is a little more complex than handling onfocus:

function textboxOnBlur(elementId, defaultText, classActive, classDefault)
{
   var textValue = document.getElementById(elementId).value;

if (textValue == defaultText || textValue.length == 0)
{
document.getElementById(elementId).className = classDefault;
document.getElementById(elementId).value = defaultText;
}
else
document.getElementById(elementId).className = classActive;
}

With this function we receive 4 parameters: the id name of the text box, the default text you want to display, the CSS style for the “active” standard look, and the CSS style for the default text look. We then create a variable called “textValue” to hold the current text in the text box. We then use that variable to see if the text box is either blank (textValue.length == 0) or has the default text (textValue == defaultText). If either condition is true we reset the text box back to displaying the default text with the default style. Otherwise, we leave the text alone and ensure the style if the “active” standard style. This function will be executed every time the text box loses focus.

Some Finishing Touches

Now, you might think about adding a couple of other finishing touches to your cool new text box. First, we’ll add maxlength so that the user is limited to a manageable number of characters in the text box. We’ll also set the title attribute which will cause a tooltip to appear when the user hovers over our text box. We can use this to provide a bit more detailed information on what should go in the text box.

<input name="Keyword_TextBoxSearch" type="text" value="Enter search keywords" maxlength="500"
title="Enter your search keywords here separated by commas." id="TextBoxSearch" class="DefaultStyle"
onblur="textboxOnBlur('TextBoxSearch','Enter search keywords','ActiveStyle',' DefaultStyle')"
onfocus="textboxOnFocus('TextBoxSearch','Enter search keywords','ActiveStyle')" />

Conclusion

These easy functions are a great way to add some professional polish to your forms and search boxes. You can save yourself some time and effort by placing the functions in a JavaScript file (.js) and using it in all of your pages. Then all you have to worry about is correctly setting up each input tag to show your default text and style. Enjoy!