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

在第1部分中，我们发现了如何构建自动扩展的文本区域并整理需求。 在关注实际的JavaScript之前，我们应该确定如何在网页中使用我们的代码。

我们的自动扩展textarea框如何初始化？ 由于我们的解决方案将是一个jQuery插件，因此我们可以使用以下jQuery调用为页面上的每个textarea实现自动扩展功能：

$("textarea").TextAreaExpander();

由于每个文本区域都会自动扩展，因此我们还没有指定单独的高度限制，因此此语句有点粗糙。 因此，我们可能需要为每个页面使用多个语句，例如

$("#textarea1").TextAreaExpander();
$("#textarea2").TextAreaExpander(50, 200); // box will size between 50 and 200 pixels
$("#textarea3").TextAreaExpander(90, 300); // box will size between 90 and 300 pixels

尽管这是可行的，但我们可以有数十个文本区域。 我们的服务器端代码还可能根据应用程序状态生成不同的textarea HTML。 维护JavaScript声明列表将很快变得很累，并且容易发生开发人员错误。

因此，让我们自己和其他开发人员使用我们的组件，使事情变得容易一些。 如果我们希望textarea自动扩展，我们将为标签分配“ expand”的类属性。 尽管class属性通常用于CSS样式，但是它可以包含其他值，并且在所有HTML和XHTML版本中都可用。 如果您的textarea已经应用了CSS类，请不要担心-可以添加任意数量的以空格分隔的值：

<!-- expanding textarea -->
<textarea name="textarea1" rows="3" cols="60" class="mystyle expand"></textarea>

为了将textarea高度限制在某个范围内，我们可以在“ expand”名称中添加最小值和最大值，例如

<!-- expanding textarea, but limited between 50 and 200px -->
<textarea name="textarea2" rows="3" cols="60" class="expand50-200"></textarea>

加载我们的页面后，JavaScript将在DOM中搜索带有“ expand”类的textarea节点，然后自动将自动扩展效果应用于该元素。 这有几个优点：

1. 默认情况下，现有的textarea标签不会自动展开。
2. 我们的触发器在textarea HTML代码中指定：与单独的JavaScript声明列表相比，它更易于理解，阅读和维护。
3. 我们仍然可以在需要时使用jQuery TextAreaExpander（）方法，例如，如果在页面加载后将textarea添加到DOM中。
4. 渐进增强给我们带来温暖舒适的感觉！

现在，我们已经确定了HTML代码和自动展开触发器，我们可以在页面源代码底部链接到我们的JavaScript：

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.textarea-expander.js"></script>

这将加载最新的jQuery库（从jQuery.com下载）和我们的新TextAreaExpander插件代码。

有用的资源：

• 查看扩展的textarea演示…
• HTML页面示例

准备进行一些JavaScript编码了吗？ 给咖啡加满并准备第3部分 ...

• 第3部分：JavaScript插件代码
• 第1部分：构建自动扩展的文本区域
• 如何开发jQuery插件

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