2.14 高亮显示表单中的焦点控件

在某些设计场景下，需要将表单中的焦点控件进行高亮显示。下面就介绍一个通过JavaScript实现高亮显示表单中焦点控件的代码实例。

关于【代码2-14】的说明：

● 第13～28行代码定义了一个表单，其中定义了一组文本框和一个按钮控件；同时，为这些表单控件定义了onfocus事件处理方法（highlight()）。

● 第31～51行代码是highlight()方法的实现，具体就是使用前面实例中介绍过的activeElement属性获取当前焦点控件，然后为其添加高亮显示的CSS样式代码。

下面使用FireFox浏览器运行测试该HTML网页，具体效果如图2.15所示。

图2.15 高亮显示表单中的焦点控件

如图2.15所示，但用户使用Tab键切换表单中控件的焦点时，获取焦点的控件具有了高亮显示的样式。