Page 53 - JavaScript修炼之道

42 第四部分 表单技巧

任务 18 暂时禁用提交按钮

有时候，表单要花一点时间等待服务器处理。这有可能是在用老式的 <input type="file"..
/> 域上传大文件，或者服务器由于某种原因还没来得及响应。无论如何，我们不希望我们还在
处理它的时候用户再次提交表单。要知道遇到重复提交是很令人恼火的事。

为了避免重复提交，可以禁用已提交过的表单的所有提交方式。这实际上就是禁用带有
type="submit"或者type="image"属性的<input>或<button>标签。由于有的浏览器（比如“可
爱”的MSIE）对CSS属性选择器处理得不好，我们最好还是给这些元素标记上特定class属性，
比如submit，然后再用这个class属性选择想禁用的元素。

右页的第一段脚本通过很短的Prototype代码实现了这个功能。它非常简洁。

你可能想进一步给表单加一些等待提交时的UI装饰——因为并非所有的浏览器都清楚地显
示被禁用的区域，而且你也可能想要强调正在处理之中（你肯定不只是因为那东西讨厌所以才
禁用它的吧）。

第二段脚本展示了怎样通过给被禁用的<input>标签填加自定义class属性来实现等待时的
UI装饰。因为用CSS做的UI更新不像禁用函数调用那么实时，所以浏览器在提交开始之前需要一
段间歇，否则提交开始之后浏览器就可能一直处理提交事件，而不再响应UI更新请求。因而我们
通过delay()把submit()调用延迟十分之一秒。

另外，注意到这里的JavaScript代码还用到了that = this闭包技巧。你也许知道，调用函
数（这里是要 delay()的那个）有可能会丢失当前束定，即this引用的值。一种办法是强制保
持束定，这需要一层额外的函数封装，比较麻烦。我们这里用闭包来让那个临时定义的匿名函数

中的代码维持到原先的this（被提交的表单对象）的引用，使得在适当的时候能够调用它的
submit()。
①

——————————
① 觉得JS的函数束定很晕吧？在http://www.alistapart.com/articles/getoutbindingsituations/上有我的ALA文章你可以看
看。搞不太清楚闭包，也不知道怎么发挥其作用？我的朋友Juriy “Kangax”Zaytsev就这个问题写了一篇很棒的
文章，网址在http://msdn.microsoft.com/en-us/scriptjunkie/ff696765.aspx。