Page 55 - JavaScript修炼之道

44 第四部分 表单技巧

任务 19 提供输入长度反馈

填写表单时经常遇到的令人沮丧的事就是看到文本输入突然停下——即使有静态文字提示
最长长度。不止是这个，你是否知道<textarea>没有maxlength=属性？真的没有。当然，
<textarea>不算合法的HTML，可以愉快地忽略掉（除非你有幸能用HTML5）。

因此，为了统一指定最大长度，可以用专门做“数据存储”的CSS class属性。这些class
属性名称由两部分组成：第一部分是 maxLength前缀，第二部分是用来表示我们想要设定的最大
长度的正整数。见右页中的HTML代码。

然后我们用JavaScript进行以下操作。

(1) 动态装饰包含这些元素的表单区域（简单起见，我假设用段落来包含。右页中的JS代码
给段落加上了class属性），然后动态创建用于显示剩余长度反馈的占位符。
(2) 根据当前输入状态初始化反馈区域。
(3) 为按键事件绑定合适的事件监听器。
(4) 放置反馈区域（我放在对应输入区域右下角下），然后把它加入文档中。现在就能看到效
果了！

这样每当发生按键输入时，只需要更新反馈即可。如果达到或者超出最大长度（当然，这在
<textarea>上不可能发生），就回退到最大允许长度。

另外，注意这份代码中的几个技巧。

 我们对keyup和keypress这两个事件都做了监听，以对非字符按键（多半是删除、剪切和
粘贴）和字符按键都作出响应。没有必要监听keydown，因为它是在文本改变之前发生的，
而此时我们没办法跨浏览器和键盘布局判断文本是否会改变。
 为避免每次按键都重复计算最长长度，我们在初始化时把它缓存起来。为了把最长长度和
输入区域关联起来，我们用了JavaScript关联数组，这个关联数组关联了输入区域的id=属
性 和输入区域对象本身。这比用更多的属性要轻便点。
①

——————————
① 这里用Prototype的identify()来保证我们的元素一定有一个id=属性。