在第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插件。
有用的资源:
也可以看看:
翻译自: https://www.sitepoint.com/build-auto-expanding-textarea-3/