ASP.NET 小技巧：使用基底頁面類別統一處理輸入控制項焦點樣式切換

需求

參考建設銀行網站，輸入控制項獲得焦點時變色，失去焦點還原。若逐一設定 CssClass 太繁瑣，可寫一個遞迴方法自動掛載 onfocus/onblur 事件。

基底頁面類別實作

public class BasePage : Page
{
    public static void SetInputControlsHighlight(Control container, string focusCssClass, bool onlyTextBoxes)
    {
        foreach (Control ctl in container.Controls)
        {
            bool isInput = ctl is TextBox
                || ctl is DropDownList
                || ctl is ListBox
                || ctl is CheckBox
                || ctl is RadioButton
                || ctl is RadioButtonList
                || ctl is CheckBoxList;

            if ((onlyTextBoxes && ctl is TextBox) || (!onlyTextBoxes && isInput))
            {
                WebControl wctl = ctl as WebControl;
                if (wctl != null)
                {
                    wctl.Attributes["onfocus"] = string.Format("this.className = '{0}';", focusCssClass);
                    wctl.Attributes["onblur"] = "this.className = '';";
                }
            }
            else if (ctl.Controls.Count > 0)
            {
                SetInputControlsHighlight(ctl, focusCssClass, onlyTextBoxes); // 遞迴處理容器控制項
            }
        }
    }
}

使用方式

1. 建立繼承 BasePage 的頁面基底類別（如 MyPage : BasePage）。
2. 所有 .aspx 頁面繼承 MyPage 而非 Page。
3. 在 Page_Load 呼叫：BasePage.SetInputControlsHighlight(this, "inputFocus", false);
4. 定義 CSS：.inputFocus { background-color: #FFFFCC; border: 1px solid #FFA500; }

優點

• 一次撰寫，全站套用，支援動態新增控制項（需在 DataBound 後再呼叫一次）。
• 可透過 onlyTextBoxes 參數控制是否僅針對 TextBox。