Page 65 - JavaScript修炼之道

54 第四部分 表单技巧

任务 24 在表单中提供动态的帮助 tooltip

有时，我们在网上放有复杂的表单。表单域可能有高层语义或者非平凡的输入规则，如下图
所示。例如，或许要强调密码域的复杂性要求。这时，最有效（虽然不太礼貌）的做法就是直接
写出来警告用户。但如果多个输入域都需要详细的警告和说明，表单就会变得拥挤而零乱。

有一个解决办法。把这些细节放在每个表单域独自的tooltip里，使它们只在需要时（也就是
当输入域获得焦点时）出现。简单来说，这是把任务12的做法用到了表单上。

注意，tooltip放置的最佳位置是在label标签里，而不只是在同一 <p> 标签里。这样如果是盲
人用户使用的话，这些信息可以不受屏幕阅读器的当前模式影响，始终能被获取到 。
①
CSS样式，尤其是这些tooltip的位置，对本任务很重要，所以我在下一页给出了部分CSS代码。
但这诚然是一个简单的例子。在代码和效果上它都可以变得更复杂：用库来给focus和blur事件
模拟实现弹出效果，就可以不必给每个相关域都手动注册事件监听器。笔者写到这里时，最新的
②
jQuery已经能直接作出渐变弹出效果 ，你应该能在你喜欢的JavaScript框架找到这个多少有点官
方的插件。

——————————
① 屏幕阅读器一般会根据当前选中的表单输入元素读出关联的 <label> 标签中的文字，而不一定会阅读同一 <p>
标签中的文字。*
② 应该是指jQuery 1.4.1版（2010-1-25发布）中新增的.live("focus")和.live("blur")。*