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

自动扩展的textarea元素在Facebook等网站上很流行。 textarea框的高度根据用户输入的文本量而扩展和缩小。 有几个优点：

1. 您的页面设计不受大型textarea框的支配。
2. 具有多个文本区域的在线表单看起来更短，完成起来也不那么困难。
3. 用户无需滚动即可看到其所有文本。

查看扩展的textarea演示…

这个由三部分组成的教程介绍了如何使用HTML和可重用的jQuery插件来构建自动扩展的textarea 。 在第3部分的最后，您将了解它的工作原理，并有在自己的项目中使用的代码。

要求

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

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

提案

我们将解决方案作为jQuery插件实现。 jQuery主要用于处理DOM嗅探和事件委托的更普通的方面。 您可以使用其他框架轻松地重新编写代码。

但是我们如何知道何时应该调整textarea大小以及使用什么高度？

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

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

• 在Firefox，Safari和Chrome中，即使未添加任何文本，scrollHeight也不会小于textarea高度。 因此，该框将展开，但删除文本不会使其收缩。 我们可以通过将textarea高度临时设置为0px然后应用实际的 scrollHeight值来解决此问题。
• 与Mozilla scrollHeight文档相反，Firefox似乎没有包含textarea填充，而Safari 4和Chrome 2却包含。 如果在顶部和底部有2px的填充，则WebKit浏览器中的scrollHeight将太大4px，并且textarea的高度将无限期增加。 减去填充会破坏Firefox，因此最简单的解决方法是将0px垂直填充应用于我们扩展的textarea元素。
• 在IE和Opera中，scrollHeight是古怪的。 它通常返回内部文本的真实高度，但是，将textarea高度设置为0px可能会返回错误的scrollHeight值。 尽管浏览器闻起来很臭 ，但我认为在这种情况下我们没有其他选择。 我们必须确保IE和Opera绝不会将textarea高度设置为0px。

我们还需要考虑滚动条。 默认情况下，大多数浏览器仅在需要时显示textarea滚动条。 但是，如果我们将溢出设置为“自动”，则滚动条将在添加新行时出现，而在textarea高度更改时消失。 将溢出设置为“隐藏”将解决滚动条闪烁的问题，但是绝不能将其应用于未扩展的文本区域或已扩展超过其指定最大高度的文本区域。

最后，调整浏览器窗口大小可能是个问题。 流畅的网页设计可以实现一个基于百分比的宽度的textarea ：调整窗口的大小将调整框的大小。 尽管我们可以检测到窗口大小的调整，但是该事件在IE中表现不佳，并会迅速调用处理程序。 我们可以对此问题进行编码，但是调整几个文本区域的大小可能会导致页面设计跳来跳去，并使用户感到困惑。 因此，在调整大小之后，仅当用户将焦点切换到该框时，我们才会调整textarea的高度。

这需要很多，而且还有更多！ 喝杯咖啡，准备第二部分 ……

• 第2部分：textarea初始化
• 第3部分：JavaScript插件代码
• 如何开发jQuery插件

From: https://www.sitepoint.com/build-auto-expanding-textarea-1/