Friendly Form Field Highlighting

Last updated : 11th September 2006

Background

You have a form based input screen that users must navigate. The problem is that there are a number fields on display and the user is getting lost when they move there eyes away from the screen. Especially true if users are not good typists.

Strategy

We will change the background colour of the currently selected form field. This will stand out from the other fields and make it easy for our user to find it on the screen.

We will handle the focus and blur events using client side JavaScript to dynamically change the CSS class of the control and thus change the background colour.

Implementation

First, let's see how the final result should look. Notice how the currently selected field is differently coloured to the rest of the form fields.

Step 1 - Add the CSS

We will start of by adding two simple CSS classes. One that can be applied to the form field when the user enters it and another to reset it back to its default display when the user exits the field.

.normalfld 
{
    background-color: #FFFFFF;
}
.focusfld 
{
    background-color: #FFFFCC;
}

Step 2 - Add the JavaScript

We need to use client side code to change the CSS class assigned to the form field. There are a number of ways to add this in ASP.NET projects. One practice, which I'm not a great fan of, is to use the ClientScriptManager classes. For this example I will create a simple JavaScript file and attach it to the page using standard HTML <script> notation.

function DoBlur(fld) {
    fld.className='normalfld';
}

function DoFocus(fld) {
    fld.className = 'focusfld';
}

Step 3 - Plumbing the JavaScript

We will add the plumbing to the ASP.NET form controls in the Page_Load event of the page. We loop through all the controls on the form and add the necessary events to our target fields. In this case we are searching for only textboxes.

   Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not Page.IsPostBack Then
            SetHighlightFields(Page.Form)
            Me.txtForename.Focus()
        End If
    End Sub

    Sub SetHighlightFields(ByVal frm As Control)
        Dim TempCheckbox As CheckBox = Nothing
        Dim TempTextBox As TextBox = Nothing
        For Each tmpctl As Control In frm.Controls
            If TypeOf tmpctl Is TextBox Then
                TempTextBox = CType(tmpctl, TextBox)
                TempTextBox.Attributes.Add("onFocus", "DoFocus(this);")
                TempTextBox.Attributes.Add("onBlur", "DoBlur(this);")
            End If
        Next
    End Sub

    Sub ClearFields(ByVal frm As Control)
        For Each tmpctl As Control In frm.Controls
            If TypeOf tmpctl Is TextBox Then
                CType(tmpctl, TextBox).Text = ""
            End If
        Next
    End Sub

That's all there is to it. Now when the user tabs or clicks through in your form each field will be highlighted when it receives the focus.

Summary

This has hopefully given you a few ideas of your own on how to provide some 'value add' features to your web applications. As you can see from the code, or lack of it, it's easy to implement this functionality. When developing, try to imagine your application from the users perspective who is going to be using it 8 hours a day!