Input Controls Highlight

Here is an easy way to add highlight effects to a web form so the user can see which control has focus.

The idea uses a BasePage, a class that inherits from System.Web.UI.Page and provides basic functionality to a variety of pages with very little effort. In my case I have several base pages for different purposes, but the base of all of them is BasePage.vb.

In BasePage.vb I override the OnLoad page event:

Protected Overrides Sub OnLoad(ByVal e As System.EventArgs)

    ' add onfocus and onblur so the active control has a different appearance
    Utilities.Helpers.SetInputControlsHighlight(Page, "highlight", True)

    MyBase.OnLoad(e)

End Sub

That calls a SetInputControlsHighlight function that lives in a separate Utilities project, though you could put it directly in the base page if you preferred:

Public Shared Sub SetInputControlsHighlight(ByVal container As Control, _
                                            ByVal ClassName As String, _
                                            ByVal OnlyTextBoxes As Boolean)

    For Each ctl As Control In container.Controls

        If ((OnlyTextBoxes AndAlso TypeOf ctl Is TextBox) _
            Or (Not OnlyTextBoxes _
                AndAlso (TypeOf ctl Is TextBox _
                    Or TypeOf ctl Is DropDownList _
                    Or TypeOf ctl Is ListBox _
                    Or TypeOf ctl Is CheckBox _
                    Or TypeOf ctl Is RadioButton _
                    Or TypeOf ctl Is RadioButtonList _
                    Or TypeOf ctl Is CheckBoxList))) Then

            Dim wctl As WebControl = CType(ctl, WebControl)
            wctl.Attributes.Add("onfocus", String.Format("this.className = '{0}';", ClassName))
            wctl.Attributes.Add("onblur", "this.className = '';")

        Else

            If (ctl.Controls.Count > 0) Then
                SetInputControlsHighlight(ctl, ClassName, OnlyTextBoxes)
            End If

        End If

    Next

End Sub

The function takes the root container as a parameter and applies the specified class, "highlight" in this case, to the controls inside it. The last parameter controls whether the style is applied to every input control on the form or only to TextBox controls.

When the user clicks into an input control it takes on a different color so it is obvious it has focus, and it reverts when focus is lost.

The original idea came from ASP.NET 2.0 Website Programming: Problem - Design - Solution by Marco Bellinaso. It is one of the best books I used in my career, and different from most: rather than a reference book, it walks through building a site from requirements and database design all the way through to deployment.