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

摘要：这是一篇在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程序的时候，这篇文章还是提供了几个方法的。如您所见，代码是很简单的。而当你做开发的时候，你有时候或许需要站在用户的角度想一想，因为他们每天八个小时在电脑前做这些数据录入做的时候，是多么的不容易的。

 

关于作者

作者是英国一家大型的telecoms and internet公司的程序开发人员。他专著于基于ASP.NET和SqlServer的Web开发，并且是微软的MCSD。在其业余时间开了一个叫做bracora的web设计的公司，http://www.bracora.com，你也可以直接访问他的博客http://www.martinmillar.co.uk。

 

 

翻译心得：

翻译起来很憋嘴，但是从里面能理解作者的意思，所以干脆就是以自己的理解方式，当然，这种方式实际上是和大家交流和学习中总结出来的，出自于大家的习惯。而国外人思维跨度有时候很难被我们理解，不过，咱们能做的，就是try to understand what they want to tell。

学习心得：

正如作者所说，代码是很简单的。但是，我觉得其里面用到的这个循环编历表单上的控件的方法确实很实用。而对于Foreach的这个东西，说实在的，起初学c#那会儿，怎么的无法理解为什么要有这么一个东西，同是循环体结构却和for这样的结构有这么大的区别。看过这个代码，我想可以给很多初学者解释为什么其存在。不过，任何事物存在都是有其理由的，学习这个东西，就是这样，很多东西，你刚开始不会很理解，甚至理解不上去那个层次，而慢慢的，就会发现，原来这么设计真的是好啊。关键之处，就是不要放弃。