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

自动扩展文本区域在第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节点。发生以下初始化：

第一行确保仅文本区域应用了自动扩展效果。
接下来的三行提取最小和最大高度值。默认情况下，使用传递给TextAreaExpander函数的参数。如果未指定，则使用正则表达式分析textarea的“ expand”类HTML。如果我们仍然没有值，则假定为0和99999（请注意，textarea的最小高度始终为1个字符，因此永远不会使用零高度）。这些值存储为textarea节点对象的属性-因此，我们可以从任何代码中检查它们。
下一行调用ResizeTextarea函数并传递textarea节点。初始化自动展开时，这会将高度设置为适当的大小。
最后，我们重置所有垂直填充并定义“ 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节点（在初始化过程中），也可以是事件对象（在发生键击或焦点时）。

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

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


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

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

有用的资源：

也可以看看：

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