32-讨论

10.7.3　讨论

为什么要绑定 keydown 和 keyup 事件？

可以只使用 keydown 事件。但是，当用户完成第一个输入字段时，下一个按键会使焦点设置为第二个输入字段，没有任何视觉提示。通过使用 keyup 事件，在填写第一个输入字段之后，第二个输入字段获得焦点，光标放在输入字段的开始位置，大部分浏览器会用边框或者其他高亮状态表示焦点。而且，在当前输入字段为空时，Backspace键需要 keyup 事件才能将焦点设置为前一个输入字段。

也可以只使用 keyup 事件。但是，如果光标在第二个输入字段中，打算使用Backspace键清除该字段，一旦删除了所有字符，焦点就会移到第一个输入字段。遗憾的是，第一个字段已经填满，所以下一个击键会因为 maxlength 属性而丢失，然后 keyup 事件将把焦点又设置为第二个输入字段。丢失击键是很糟糕的事情，所以在 keydown 上执行相同的检查，这样在字符丢失之前会将光标移到下一个输入字段。

因为这一逻辑不是CPU密集的，所以可以同时绑定 keydown 和 keyup 事件没什么问题。在其他情况下，可能需要采用更具选择性的方案。

你将会注意到， ignoreKeycodes 变量是一个字符串。如果我们打算动态地构建该变量，创建一个数组，然后使用 JavaScript 的 .join(', ') 或 .toString() 方法会更快捷。但是因为字符串值始终相同，从一开始就将它编码为一个字符串更简单。因为担心出错，我让 ignoreKeyCodes 以逗号开始和结束。这样，当搜索前后加上逗号的 keycode 时，就能保证只找到你想找的数字——如果搜索的是 9 , 不会找到 19 或者 39 。

注意，没有用来阻止在最后一个 <input> 元素上执行 $this.next().focus() 的代码。这里利用了jQuery链。如果 $this.next() 什么也没找到，则方法链停止——它无法用 .focus() 将焦点设置在找不到的元素上。在不同的场景中，预先缓存任何已知的 .prev() 和 .next() 元素可能是有意义的。

当禁用JavaScript时会发生什么情况？什么也不会发生，用户必须手动单击，从一个文本输入字段转到下一个字段。