在焦点处更改文本框/输入框的背景颜色

• 下载 colorBg - 3.09 KB

引言

以下示例代码说明了如何将焦点背景颜色更改效果添加到常见的 asp.net 控件，例如 TextBox 或 ListBox。 这种效果可以改善用户界面，但未作为 asp.net 控件的内置属性包含在内。 提出的解决方案在 Internet Explorer 和 firefox 中均有效。 我在网上找到了其他 CSS 技术可以实现相同的结果，但由于其对 CSS 的支持不完整，它们在 Internet Explorer 中无法工作。 提出的策略也适用于嵌套主页。

附带了一个简单的 asp.net Web 项目，演示了预期的效果。

上面的图显示了当文本框被选中（或获得焦点）时，其背景颜色会发生变化。 下面的图显示了当列表框被选中（获得焦点）时，效果如何。 如您所见，文本框的背景颜色已恢复，而列表框的背景颜色为黄色。

使用代码

以下是主页中的主要函数。 主页包含一个名为 ContentPlaceHolder1 的主要 ContentPlaceHolder。 addBlurAtt 函数在主页的 Page_Load 事件期间调用。 此函数从 ContentPlaceHolder1 控件开始，递归地遍历所有子控件，查找 TextBox 或 ListBox 类型的控件。 当找到这些控件时，它会添加属性，以便在 onFocus 和 onBlur 事件上调用两个不同的 javascript 函数。

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);"); 
    } 
} 

以下是两个 javascript 函数 DoFocus 和 DoBlur。 这些函数基本上更改了控件的 css 类。

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

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

以下是 javascript 函数使用的两个类。

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

我已经在我的项目中使用了这种策略很长时间了。 我还没有看到任何问题。