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

在第1部分中，我们发现了如何构建自动扩展的文本区域并整理需求。 在第2部分中，我们确定了编码人员如何初始化组件。 现在是时候让我们开始尝试一些JavaScript了。

我们正在构建一个名为TextAreaExpander的jQuery插件。 您可以在本教程中了解jQuery插件开发的复杂性 ，但是我们的代码的准系统是：

(function($) {

	// jQuery plugin definition
	$.fn.TextAreaExpander = function(minHeight, maxHeight) {

		// ... our code ...

		return this;
	};

})(jQuery);

然后，$ .fn语句使用参数minHeight和maxHeight声明我们的新jQuery插件TextAreaExpander。 我们可以在JSON对象中表达这些内容，但是不太可能需要其他参数，因此我们将其保持简单。

注意，“ this”是指jQuery对象。 我们返回它以确保其他jQuery效果可以绑定到相同的DOM元素。

初始化文本区域

以下初始化代码已添加到我们的TextAreaExpander函数中：

// initialize
this.each(function() {

	// is a textarea?
	if (this.nodeName.toLowerCase() != "textarea") return;

	// set height restrictions
	var p = this.className.match(/expand(d+)-*(d+)*/i);
	this.expandMin = minHeight || (p ? parseInt('0'+p[1], 10) : 0);
	this.expandMax = maxHeight || (p ? parseInt('0'+p[2], 10) : 99999);

	// initial resize
	ResizeTextarea(this);

	// add events
	if (!this.Initialized) {
		this.Initialized = true;
		$(this).css("padding-top", 0).css("padding-bottom", 0);
		$(this).bind("keyup", ResizeTextarea).bind("focus", ResizeTextarea);
	}
});

return this;
};

这将遍历所有jQuery选择的DOM节点并运行一个匿名函数。 该函数中“ this”的值是一个单独的textarea节点。 发生以下初始化：

1. 第一行确保仅文本区域应用了自动扩展效果。
2. 接下来的三行提取最小和最大高度值。 默认情况下，使用传递给TextAreaExpander函数的参数。 如果未指定，则使用正则表达式分析textarea的“ expand”类HTML。 如果我们仍然没有值，则假定为0和99999（请注意，textarea的最小高度始终为1个字符，因此永远不会使用零高度）。 这些值存储为textarea节点对象的属性-因此，我们可以从任何代码中检查它们。
3. 下一行调用ResizeTextarea函数并传递textarea节点。 初始化自动展开时，这会将高度设置为适当的大小。
4. 最后，我们重置所有垂直填充并定义“ keyup”和“ focus”事件。 当文本区域获得焦点时以及用户更新文本后，将调用相同的ResizeTextarea函数。 这些事件周围的'if'条件确保它们只能应用于任何文本区域一次。 此条件可能已应用于整个初始化函数，但是，此代码允许我们随意更改最小和最大高度。

调整文本区域的大小

现在，我们需要定义我们的ResizeTextarea函数。

在第1部分中 ，我们讨论了浏览器的区别，并指出IE和Opera绝对不应将textarea高度设置为0px。 因此，如果使用IE或Opera，我们将分配一个返回false的变量：

var hCheck = !($.browser.msie || $.browser.opera);

它很脏，但是我担心我们不能依靠更好的方法，例如对象检测。 不过，我愿意接受建议！

现在，我们可以对ResizeTextarea函数进行编码：

// resize a textarea
function ResizeTextarea(e) {

	// event or element?
	e = e.target || e;

	// find content length and box width
	var vlen = e.value.length, ewidth = e.offsetWidth;
	if (vlen != e.valLength || ewidth != e.boxWidth) {

		if (hCheck && (vlen < e.valLength || ewidth != e.boxWidth)) e.style.height = "0px";
		var h = Math.max(e.expandMin, Math.min(e.scrollHeight, e.expandMax));

		e.style.overflow = (e.scrollHeight > h ? "auto" : "hidden");
		e.style.height = h + "px";

		e.valLength = vlen;
		e.boxWidth = ewidth;
	}

	return true;
};

此函数传递参数“ e”。 这可以是textarea节点（在初始化过程中），也可以是事件对象（在发生键击或焦点时）。

1. 如果触发了事件，第一行会将'e'更改为textarea节点对象。
2. 在文本区域中输入的字符数已分配给vlen。 框的像素宽度分配给ewidth。 如果这些值未更改，则无需担心调整框的大小（用户可以只是移动光标）。 vlen和ewidth保留为名为valLength和boxWidth的textarea节点对象的属性。 这些是在调整textarea的大小后设置的，因此在第一次调用ResizeTextarea时总是会发生大小调整。
3. 下一行将textarea高度重置为0px。 仅在非IE / Opera浏览器中，如果内容已删除或框宽已更改，则只会发生这种情况。
4. 现在将textarea的scrollHeight值分配给变量“ h”。 Math.min和Math.max用于确保该值落在为此文本区域定义的最小和最大像素限制之内。
5. 在更改textarea高度之前，我们先更改CSS溢出属性。 仅当内容高度超过textarea高度时，才会显示滚动条。
6. 现在，我们可以修改textarea高度并更新valLength和boxWidth的值。
7. 最后，该函数返回true，以确保不会取消其他textarea事件处理程序。

我们的TextAreaExpander jQuery插件已完成。 但是，我们需要确保将效果应用于具有HTML“ expand”类的所有textarea标签。 在文件末尾，我们可以添加一个事件，该事件在页面加载后初始化所有适当的textarea：

// initialize all expanding textareas
jQuery(document).ready(function() {
	jQuery("textarea[class*=expand]").TextAreaExpander();
});

希望您对本系列教程有所帮助。 可以在自己的项目中随意使用自动扩展的textarea插件。

有用的资源：

• 扩展textarea示例页面
• 示例页面HTML
• 完整的jQuery插件代码（jquery.textarea-expander.js）
• 在ZIP文件中下载完整代码

也可以看看：

• 第1部分：构建自动扩展的文本区域
• 第2部分：textarea初始化
• 如何开发jQuery插件

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