在第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节点,然后自动将自动扩展效果应用于该元素。 这有几个优点:
- 默认情况下,现有的
textarea
标签不会自动展开。 - 我们的触发器在
textarea
HTML代码中指定:与单独的JavaScript声明列表相比,它更易于理解,阅读和维护。 - 我们仍然可以在需要时使用jQuery TextAreaExpander()方法,例如,如果在页面加载后将textarea添加到DOM中。
- 渐进增强给我们带来温暖舒适的感觉!
现在,我们已经确定了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插件代码。
有用的资源:
准备进行一些JavaScript编码了吗? 给咖啡加满并准备第3部分 ...
From: https://www.sitepoint.com/build-auto-expanding-textarea-2/