永久免费建个人网站seo外包公司兴田德润官方地址
在第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 restrictionsvar 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 resizeResizeTextarea(this);// add eventsif (!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 widthvar 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插件。
有用的资源：
- 扩展textarea示例页面
- 示例页面HTML
- 完整的jQuery插件代码（jquery.textarea-expander.js）
- 在ZIP文件中下载完整代码
也可以看看：
- 第1部分：构建自动扩展的文本区域
- 第2部分：textarea初始化
- 如何开发jQuery插件
翻译自: https://www.sitepoint.com/build-auto-expanding-textarea-3/