开发者问题收集

Javascript 调整文本区域大小

2018-12-31
147
javascript jquery

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

$('.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

谁能告诉我为什么会出现此错误？

2个回答

NewToJS 基本上已经给了你答案。我会尝试添加一些额外的细微差别。

为什么你的代码不起作用

根据 MDN 文档 ， getElementsByClassName() 返回一个 HTMLCollection（元素列表）。

  • 你正尝试从此集合的另一个属性（style）访问一个属性（height）。由于 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 中生成元素时使用该元素的引用。
Rob Monhemius
2018-12-31

我不知道您是否真的想自己编写代码，无论是为了学习还是其他原因 :-)

无论如何，如果您想使用现有的 js 插件，我可以向您推荐这个优秀的插件： http://www.jacklmoore.com/autosize/

使用一行代码（如 autosize($('textarea')) ）它将立即起作用...

这是一个 JsFiddle 示例 

$('#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>
PierreN
2018-12-31