Later Today: ASP.NET Tutorial 2: Introduction to C#

(jQuery) Add “Smart” Default Values to Form TextBoxes

Prerequisites: Good understanding of JavaScript, basic jQuery familiarity, familiarity with CSS and HTML forms.

This article covers a handy usability feature that will allow you to set “smart” default values in your form textboxes. The JavaScript handles three things – coloring (gray for default, black for user-entered values), automatically clearing the field when a user selects it, and automatically replacing the default text if the user de-selects the field without entering anything.

This is particularly useful for forms targeting mobile browsers (such as iPhone or Android, since you can then use the field itself as a label) – or forms where you want to include some “example text” in certain fields. It’s a very clean, intuitive way of improving the usability of any web form.

The following example is meant to be fairly automagic. Let’s take a look at the code and I’ll explain how to use it afterward…

jQuery: Create a ‘usehint’ CSS Class
/***************************************************************************
 * On Document Ready
 **************************************************************************/
jQuery(function(){
    //Trigger the behavior on this page
    UseDefaultTextboxValues();
}); //End DOM Ready

/***************************************************************************
 * UseDefaultTextboxValues()
 *
 * PURPOSE:
 * Default Input Values - Handle default values for form elements. Simply call
 * function from instead ready scope to automatically handle default values
 * for form textbox elements with the ".usehint" class.
 **************************************************************************/
function UseDefaultTextboxValues(){
    jQuery('input[type="textbox"].usehint').each(function(){
        //We need to save the element for the sake of the data() method
        var definput = jQuery(this);
        //Save the default value for this element
        definput.data('DefVal',definput.val())
            //Assign a starting color of silver
            .css('color','silver')
                //When the this element gets focus...
                .focus(function(){
                    //If the default text is the current value...
                    if(definput.val()==definput.data('DefVal')){
                        //Clear the text and change color to black
                        definput.val('').css('color','black');
                    }
                })
                //When this element loses focus...
                .blur(function(){
                    //If the field is essentially empty...
                    if(definput.val().replace(' ','')==''){
                        //Use our saved default value
                        definput.val(definput.data('DefVal'))
                            //And change color back to silver
                            .css('color','silver');
                    }
                });
                //Additional functionality goes here
        });
}

This piece of script specifically looks for textbox elements ( <input type="textbox"> ) that have been given the “usehint” class. Whatever starting value you give those elements in your HTML is then treated as “default” text with the automatically clearing/replacing behavior I described above. A field that uses the above code might look like this:

<input type="textbox" class="usehint" value="Enter your name" />

Making Validation Easier (treat default values as empty)

The one piece of the puzzle that is missing from the above example is validation handling. Setting a default value can wreak havok on server-side validation (especially if you want to use this for “example input”). The simplest solution is to add a piece of JavaScript code that treats fields with default values as empty when you click submit. In the above example you’ll notice a code-comment that says //Additional functionality goes here (line 34) – the following code should be placed there, inside the .each function.

jQuery: Submit fields with default values as empty
/***************************************************************************
 * Before submit, set all fields with default values to empty
 **************************************************************************/
//Select only the current form
jQuery(this).parents('form:first')
       //When this form's submit button is clicked...
       .find('input[type="submit"],button[type="submit"]').click(function(){
       //Select all default-capable fields in the current form
        jQuery(this).parents('form:first').find('input.usehint').each(function(){
            //If the data matches the value...
            if(jQuery(this).val()==jQuery(this).data('DefVal')){
                //Set the value of the field to empty
                jQuery(this).val('');
            }
        });
        //Allow the button to submit
        return true;
});

What this does is find a submit button within the form and, when clicked, identifies any textboxes (only in the current form) where the default value is the value currently entered… if it is, then the field is set to empty ( “” ) before it’s sent to the server.

Note: This “default=empty” code may cause problems with client-side JavaScript validation if you’re not careful. Keep this in mind whenever adding client-side validation to forms using this trick.

No Comments

Post a Comment

You must be logged in to post a comment.

RSS Twitter LinkedIn Facebook
Doing neato things with JavaScript, please wait...