Question

我正在尝试根据页面中文本的数量来调整页面上多个文本区域的大小。通过替换周围的标签在事件处理程序中创建文本区域：

$('.container').on('click', '.js-post-edit-button', function (e) {
    e.preventDefault();
    const $form = $(this).parentsUntil(".js-post-update-form").parent();
    const $h5 = $form.find(".post-title");
    const $p = $form.find(".post-content");
    $h5.replaceWith($("<textarea/>", {
        "name": "post_edit[title]",
        "class": "form-control js-textarea-content",
        "id": "js-textarea-title",
        "style": "margin-bottom: 20px;",
        "text": $h5.text().replace("\n", "").replace(/\s{2,}/g, " ").trim(),
    }));
    $p.replaceWith($("<textarea/>", {
        "name": "post_edit[description]",
        "class": "form-control js-textarea-content",
        "id": "js-textarea-description",
        "style": "margin-bottom: 20px;",
        "text": $p.text().replace("\n", "").replace(/\s{2,}/g, " ").trim(),
    }));
    resizeTextarea();
});

function resizeTextarea () {
    const textarea = document.getElementsByClassName("form-control js-textarea-content");
    textarea.style.height = 'auto';
    textarea.style.height = text.scrollHeight+'px';
}

当我单击编辑按钮（js-post-edit-button）时，出现以下错误：

Uncaught TypeError: Cannot set property 'height' of undefined

谁能告诉我为什么我会收到此错误？

Answer 1

NewToJS几乎已经给了您答案。我会尝试添加一些细微差别。

为什么您的代码无法使用

根据MDN documentation getElementsByClassName()返回HTMLCollection（元素列表）。

您正在尝试从此集合的另一个属性（样式）访问一个属性（高度）。由于HTMLCollection上不存在'style'属性，因此它将返回undefined。
现在您正在尝试更改此属性的'height'属性。

那应该解释为什么会出现错误：

Uncaught TypeError: Cannot set property 'height' of undefined

替代方法

我只是将函数更改为接受元素作为参数。

function resizeTextarea ( textarea ) {
    textarea.style.height = 'auto';
    textarea.style.height = text.scrollHeight+'px';
}

您还可以使用更多面向对象的方法，并将新方法添加到HTMLTextAreaElement.prototype中。我想无论你喜欢什么。

现在，您可以按任意方式获取元素

我会使用getElementsByClassName()[0] 不推荐 。它可能大部分时间都有效，但是当该类在页面上多次存在时，可能会导致意外情况。
如果您100％确信该元素在页面上只会出现一次，则最好是document.getElementById()。
在javascript中生成元素时，可以使用对元素的引用。

Answer 2

我不知道您是否出于学习或其他原因绝对要自己编码：-）

无论如何，如果您愿意使用现有的js插件，我可以建议您使用这个出色的插件：http://www.jacklmoore.com/autosize/

只需使用autosize($('textarea'))这样的单行代码，即可立即运行...

这里是JsFiddle Example

$('#autosize').autosize();

<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/autosize.js/1.18.4/jquery.autosize.min.js"></script>
<textarea id="autosize" style="width:200px;">
First
Second
Third</textarea>

Javascript调整Textarea大小

2 个答案: