如何构建自动扩展Textarea jQuery插件，第1部分

自动扩展文本区域在 Facebook 等网站上很受欢迎。文本区域框的高度会根据用户输入的文本数量而扩展和收缩。这有几个优点：

1. 您的页面设计不会被大型文本区域框占据主导地位。
2. 包含多个文本区域的在线表单看起来更短，完成起来也更容易。
3. 用户无需滚动即可查看所有文本。

查看扩展文本区域演示……

本分三部分的教程描述了如何使用 HTML 和可重用的 jQuery 插件构建自动扩展文本区域。在第三部分结束时，您将了解其工作原理，并拥有可在您自己的项目中使用的代码。

需求

像所有优秀的开发者一样，我们应该彻底了解系统需求：

1. 任何页面上的任何文本区域都应在我们需要时自动扩展。
2. 但是，有些文本区域可能不需要自动扩展功能。
3. 我们必须能够指定文本区域高度可以 (a) 无限增长，或 (b) 在特定范围内增长，例如，使用 50 到 200 像素之间的最佳高度。
4. 我们的解决方案应该在我们选择的任何页面上都可重用。
5. 应使用渐进增强技术，以确保没有 JavaScript 的用户仍然可以使用标准文本区域框。
6. 该解决方案应与 IE6 、Firefox 2 、Opera、Safari 和 Chrome 兼容。

方案

我们将解决方案实现为一个 jQuery 插件。jQuery 主要用于处理 DOM 嗅探和事件委托等更平凡的方面；您可以轻松地使用另一个框架重写代码。

但是，我们如何知道何时应该调整文本区域大小以及使用什么高度呢？

首先，我们可以为任何文本区域分配一个“keyup”事件处理程序。这将在按下键并修改文本后立即调用一个函数。

然后，我们可以检查 DOM scrollHeight 属性。这将返回内部滚动部分的高度，即用户输入的文本的高度。如果我们将文本区域的高度设置为当前 scrollHeight 值，则滚动条将变得无关紧要。不幸的是，scrollHeight 不是 W3C 建议，并且我们需要克服一些跨浏览器不一致性：

• 在 Firefox、Safari 和 Chrome 中，scrollHeight 永远不会小于文本区域高度——即使没有添加文本也是如此。因此，框会扩展，但删除文本不会缩小它。我们可以通过暂时将文本区域高度设置为 0px，然后应用实际 scrollHeight 值来解决此问题。
• 与 Mozilla scrollHeight 文档相反，Firefox 似乎不包含文本区域填充，而 Safari 4 和 Chrome 2 包含。如果我们在顶部和底部有 2px 填充，则 scrollHeight 在 WebKit 浏览器中将大 4px，并且文本区域高度将无限增长。减去填充会破坏 Firefox，因此最简单的解决方法是将 0px 垂直填充应用于我们的扩展文本区域元素。
• 在 IE 和 Opera 中，scrollHeight 很古怪。它通常返回内部文本的真实高度，但是，将文本区域高度设置为 0px 会返回不正确的 scrollHeight 值。虽然浏览器嗅探很糟糕，但我认为在这种情况下我们没有其他选择。我们必须确保 IE 和 Opera 从不将文本区域高度设置为 0px。

我们还需要考虑滚动条。默认情况下，大多数浏览器仅在需要时才显示文本区域滚动条。但是，如果我们将 overflow 设置为“auto”，则在添加新行时滚动条将出现，然后在更改文本区域高度时消失。将 overflow 设置为“hidden”将解决闪烁的滚动条问题，但这绝不能应用于非扩展文本区域或已扩展到其指定最大高度以外的文本区域。

最后，浏览器窗口调整大小可能是一个问题。流体网页设计可以实现具有基于百分比的宽度的文本区域：调整窗口大小将调整框大小。虽然我们可以检测窗口调整大小，但该事件在 IE 中表现不佳，并且会快速调用处理程序。我们可以解决这个问题，但是调整多个文本区域的大小可能会导致页面设计跳动并混淆用户。因此，在调整大小后，我们只会在用户将焦点切换到该框后才调整文本区域的高度。

有很多内容需要吸收，而且还有更多内容！给自己冲杯咖啡，准备好迎接第二部分吧……

• 第二部分：文本区域初始化
• 第三部分：JavaScript 插件代码
• 如何开发 jQuery 插件

以上是如何构建自动扩展Textarea jQuery插件，第1部分的详细内容。更多信息请关注PHP中文网其他相关文章！