摘要:这是一篇在www.asp.net找到的文章,详细地址在http://developer.bracora.com/Articles/FormHighlight.aspx,作者是Martin Millar。文章里有句话说的很好:<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />

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

背景

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

解决方案

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

在这个方案里我们把提交焦点并且出发事件的任务交给客户端的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这样的结构有这么大的区别。看过这个代码,我想可以给很多初学者解释为什么其存在。不过,任何事物存在都是有其理由的,学习这个东西,就是这样,很多东西,你刚开始不会很理解,甚至理解不上去那个层次,而慢慢的,就会发现,原来这么设计真的是好啊。关键之处,就是不要放弃。

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

  1. react 统一字段验证_如何使用React的受控输入进行即时表单字段验证

    react 统一字段验证 by Gosha Arinich 通过Gosha Arinich 如何使用React的受控输入进行即时表单字段验证 (How to use React's controlle ...

  2. 字段校验 css样式_CSS伪类:根据输入的表单字段样式

    字段校验 css样式 The following is an extract from our book, CSS Master, written by Tiffany B. Brown. Copie ...

  3. 如何禁用Web表单字段/输入标签上的浏览器自动完成功能?

    如何在主要浏览器中为特定input (或form field )禁用autocomplete ? #1楼 您可以在输入中使用. 例如; <input type=text name="t ...

  4. php表单的输出,php – Joomla输入表单字段输出

    我想做的就是给joomla输入表单提供基本的bootstrap样式: some text 我使用带有less的mixin将样式应用于现有的输入类 //input form fields .valida ...

  5. html表单文本框怎么输出函数值,如何获取用户输入的html文本表单字段传递给javascript函数的值?...

    我想通过生成用户必须输入到文本输入表单字段的随机数创建我自己的反垃圾邮件过滤器,如果它是正确的,他们进入下一页,如果不是,则显示错误数字输入不正确.如何获取用户输入的html文本表单字段传递给java ...

  6. adobe reader java_使用PDF框设置的表单字段值在Adobe Reader中不可见

    尝试使用Apache PDFBOX(1.8.5)从字段中设置一些问题我遇到了问题 . 我有几个不同的静态PDF用于测试 . 使用以下代码,我可以设置表单字段的值,并保存生成的PDF . 然后,我可以在 ...

  7. mysql修改表字段小数点精度,mysql – 如何配置Rails以在表单字段中以正确的精度输出小数?...

    我想在我的(sqlite和mysql)数据库中存储货币.我正在尝试使用十进制列类型,其中:scale => 2. 这不符合预期.如果我保存记录:rate => 10.50,它作为10.5存 ...

  8. AntDesign Form表单字段校验的三种方式

    1.使用getFieldDecorator的rules规则 最简单的方法就是使用getFieldDecorator中的rules验证.rules中定义校验规则,message为校验不通过时的提示文字. ...

  9. 表单字段三维数组名_【技术汇】回转式空气预热器温度场三维数值模拟

    电力行业节能环保公众服务平台--权威.专业.创新的电力节能环保公众号 全文3672字 阅读约需3.5分钟 作者 | 闫顺林  曹保鑫 华北电力大学能源动力与机械工程学院 [摘 要]烟气经选择性催化还原 ...

最新文章

  1. centos共享linux文件夹权限,CENTOS7 搭建文件服务器:samba共享linux文件夹
  2. Redis分布式锁的正确实现方式(Java版)
  3. 基于规则的应用程序开发实战(转载与MSDN)
  4. 广州市岑村教练场考科目二,惊险通过,经验总结
  5. redis 参数配置总结
  6. 更改tomcat的根目录路径
  7. Cisco无线AP在复杂企业环境配置指南
  8. mysql在线修复主从同步
  9. 猪肉种类,全国“名猪”大盘点
  10. 手机端通讯录制作,字母索引查找
  11. 简单的matlab阶乘计算
  12. getSreenWH()
  13. 【案例20】NC系统was部署后无法登录
  14. Mixly系列 | 关于Blynk,你或许不知道的几个小技巧
  15. 华为荣耀X1相机或图库图标被删除后的恢复方法(不需要恢复出厂设置)!
  16. 前端调用微信扫一扫不触发事件,没有任何反应
  17. Elasticsearch 断路器报错了,怎么办?
  18. PAT乙级真题全集-PAT (Basic Level) Practise (中文)
  19. Excel文档的生成和压缩
  20. 马云质押阿里巴巴股票寻求贷款,要有大动作?旧闻新炒!

热门文章

  1. python异常值处理实例_python-异常值:(“ 08001”,“ [08001] [unixODBC]...
  2. 从1亿个ip中找出访问次数最多的IP
  3. tidb 架构 ~Tidb学习系列(5)
  4. 2015 EC L - Multiplication Table
  5. 7.8 服务暴露总结
  6. HTML 图片加载问题
  7. Reapp - 下一代的 Hybrid App 开发框架
  8. RHCE培训笔记——Samba
  9. sqlserver_identity
  10. 新上线的APP怎样推广才更获客呢?