Friendly Form Field Highlighting

by Martin Millar

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!

About the author

Martin Millar is an solutions architect for a large consultancy firm based in Melbourne, Australia. Previously he worked as a senior applications developer for a large Telecoms firm in the UK. He specialises in web development using ASP.NET and SQL Server and is a Microsoft Certified Solutions Developer(MCSD). In his spare time he runs a fledgling web design company called bracora at http://www.bracora.com.

Comments

                        
 For Each ctrlMaster As Control In Page.Form.Controls
  If TypeOf ctrlMaster Is ContentPlaceHolder Then
    For Each ctrlContent As Control In ctrlMaster.Controls
      If TypeOf ctrlContent Is TextBox Then
        Dim objTBox As TextBox = CType(ctrlContent, TextBox)
        objTBox.Attributes.Add("onFocus", "DoFocus(this);")
        objTBox.Attributes.Add("onBlur", "DoBlur(this);")
      End If
    Next ctrlContent
  End If
Next ctrlMaster
                        

   Protected void Page_Load(object sender, EventArgs e)
   {
        If (!Page.IsPostBack)
        {
            SetHighlightFields(Page.Form);
            this.txtForename.Focus();
        }
   }

    void SetHighlightFields(Control frm)
    {
        CheckBox TempCheckbox = null;
        TextBox TempTextBox = null;
        foreach(Control tmpctl in frm.Controls)
        {
            if (tmpctl.GetType() == typeof(TextBox)) 
            {
                TempTextBox = (TextBox)tmpctl;
                TempTextBox.Attributes.Add("onFocus", "DoFocus(this);");
                TempTextBox.Attributes.Add("onBlur", "DoBlur(this);");
            }
        }
    }

    void ClearFields(Control frm)
    {
        foreach(Control tmpctl in frm.Controls)
        {
            if (tmpctl.GetType == typeof(TextBox)
            {
                ((TextBox)tmpctl).Text = ""
            }
        }
    }

        private void SetHighlightFields(Control frm)
        {
            CheckBox    TempCheckbox    = null;
            TextBox     TempTextBox     = null;
            DropDownList TempDDL        = null;

            foreach (Control tmpctl in frm.Controls)
            {
                if (typeof(TextBox) == tmpctl.GetType())
                {
                    TempTextBox = (TextBox)tmpctl;
                    TempTextBox.Attributes.Add("onFocus", "DoFocus(this);");
                    TempTextBox.Attributes.Add("onBlur", "DoBlur(this);");
                }

                if (typeof(DropDownList) == tmpctl.GetType())
                {
                    TempDDL = (DropDownList)tmpctl;
                    TempDDL.Attributes.Add("onFocus", "DoFocus(this);");
                    TempDDL.Attributes.Add("onBlur", "DoBlur(this);");
                }
            }

   Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        'Put user code to initialize the page here
        If Not Page.IsPostBack Then
            SetHighlightFields(Page.Controls)
        End If

    End Sub

    Sub SetHighlightFields(ByVal frm As ControlCollection)
        Dim TempCheckbox As CheckBox = Nothing
        Dim TempTextBox As TextBox = Nothing
        For Each tmpctl As Control In frm
            ' check to see if this has a sub collection of controls
            If tmpctl.Controls.Count > 0 Then
                SetHighlightFields(tmpctl.Controls)
            End If
            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