Change Textbox/Input background color on focus

• Download colorBg - 3.09 KB

Introduction

The sample code below illustrates how an onfocus background color change effect can be added to common asp.net controls such as a TextBox or a ListBox. This effect can improve the user interface but is not included as a built in property in asp.net controls. The proposed solution works in both Internet Explorer and firefox. I have found other CSS techniques on the web that can achieve the same result but they do not work in Internet Explorer due to its lack of full support for CSS. The proposed strategy also works with nested master pages.

Attached is a simple asp.net web project that demonstrates the intended effect.

The figure above shows the background color of the textbox changing when it is selected(or brought in focus) by the user. The figure below shows the effect when the listbox is selected(in focus). As you can see the background color of the textbox is restored, while the background color of the listbox is yellow.

Using the code

Below is the main function from the master page. The master page consists of one main ContentPlaceHolder called ContentPlaceHolder1. The addBlurAtt function is called during Page_Load event of the master page. This function starts with the ContentPlaceHolder1 control and recursively goes through all child controls looking for controls of type TextBoxes or ListBoxes. When these controls are found, it adds attributes to them to call two different javascript functions on the onFocus and onBlur events.

protected void Page_Load(object sender, EventArgs e) 
{ 
    addBlurAtt(ContentPlaceHolder1); 
} 
//recursive function that adds attribute to all child controls 
private void addBlurAtt(Control cntrl) 
{ 
    if (cntrl.Controls.Count > 0) 
    { 
        foreach (Control childControl in cntrl.Controls) 
        { 
            addBlurAtt(childControl); 
        } 
    } 
    if (cntrl.GetType() == typeof(TextBox)) 
    { 
        TextBox TempTextBox = (TextBox)cntrl; 
        TempTextBox.Attributes.Add("onFocus", "DoFocus(this);"); 
        TempTextBox.Attributes.Add("onBlur", "DoBlur(this);"); 
    } 
    if (cntrl.GetType() == typeof(ListBox)) 
    { 
        ListBox TempTextBox = (ListBox)cntrl; 
        TempTextBox.Attributes.Add("onFocus", "DoFocus(this);"); 
        TempTextBox.Attributes.Add("onBlur", "DoBlur(this);"); 
    } 
} 

Here are the two javascript functions DoFocus and DoBlur. These functions basically change the css class of the controls.

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

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

Below are the two classes used by the javascript functions.

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

I have been using this strategy in a my projects for a long time now. I have not seen any pitfalls.