[翻译]用表单字段加亮的方式为用户提供友好的界面

摘要：这是一篇在www.asp.net找到的文章，详细地址在http://developer.bracora.com/Articles/FormHighlight.aspx，作者是Martin Millar。文章里有句话说的很好：

代码是很简单的。而当你做开发的时候，你有时候或许需要站在用户的角度想一想，因为他们每天八个小时在电脑前做这些数据录入做的时候，是多么的不容易的。

 

 

背景

我们设计的程序往往会有这样的情况，就是一个表单上有很多的内容需要用户来填写，而对于一个不太熟练的用户来说，“看走眼”的事情会经常的发生。

解决方案

如果当用户在表单里填写一个字段的同时我们把那个字段的颜色边一下，也就是背景颜色，那么会是这个字段明显区别于其它待填写或已填写好的字段，这样用户就可以很容易的找到当前所填写的是哪里。

在这个方案里我们把提交焦点并且出发事件的任务交给客户端的Javascript来完成，通过它，可以利用CSS来动态的改变一个控件的背景颜色。

具体实现

首先，我们先看下最终效果。请留意下当前获得焦点的那个字段的颜色与其它控件的区别。

 

 

第一步：填加CSS

填加两个简单的CSS Class。一个是在控件获得焦点的时候被应用的样式，而另一个是与获得焦点前的样式是一样的，也就是在控件失去焦点后被应用的。

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

 

第二步：填加Javascript脚本

我们需要通过客户端脚本来来实现不同的CSS样式被注册到指定的控件上。在ASP.NET里有很多这样的解决方法。其中的一个就是用ClientScriptManager类。在这里我将创建一个简单的Javascript脚本然后用标准的<SCRIPT>标记把其注册到页面上。

 

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

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

第三步：把效果填加到每个字段中（原文为Plumbing the Javascript）

我们需要让每个字段都有这样的效果，那么就需要在Page_Load事件里来完成。解决的方法是做一个循环检索表单里的所有控件，如果发现控件是TextBox类型的话那么就把这个控件加上相应的属性。

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

做到这里所有的工作就都完成了。用户只要一通过单击或者Tab的方式使控件获得焦点，那么这个字段就会变成高亮的状态。

 

总结

当你设计类似那种填写表单的web程序的时候，这篇文章还是提供了几个方法的。如您所见，代码是很简单的。而当你做开发的时候，你有时候或许需要站在用户的角度想一想，因为他们每天八个小时在电脑前做这些数据录入做的时候，是多么的不容易的。

 

其实很简单,在微软的一个例子中早就有了
public static void SetInputControlsHighlight(Control container, string className, bool onlyTextBoxes)//将指定的样式应用于页面控件
{
foreach (Control ctl in container.Controls)//与
{
if ((onlyTextBoxes && ctl is TextBox) || ctl is TextBox || ctl is DropDownList ||
ctl is ListBox || ctl is CheckBox || ctl is RadioButton ||
ctl is RadioButtonList || ctl is CheckBoxList)
{
WebControl wctl = ctl as WebControl;
wctl.Attributes.Add("onmouseover", string.Format("this.className = '{0}';", className));
wctl.Attributes.Add("onmouseout", "this.className = '';");
}
else
{
if (ctl.Controls.Count > 0)
SetInputControlsHighlight(ctl, className, onlyTextBoxes);
}
}
}

在page_load()中调用该函数
如 SetInputControlsHighlight(this, className, true);