如何使用 HTML 和 Jquery 根据文本修复文本区域高度 [重复]答案

【问题标题】：How to fix textarea height as per text using HTML and Jquery [duplicate]如何使用 HTML 和 Jquery 根据文本修复文本区域高度 [重复]
【发布时间】：2018-10-13 14:33:55
【问题描述】：

我需要一个帮助。我需要根据里面写的内容来修复文本区域的高度。我在下面解释我的代码。

<html>
  <head>
    <link rel="stylesheet" href="lib/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="lib/script.js"></script>
  </head>

  <body>
    <h1>Hello</h1>
    <textarea id="textarea-container">
    Line 1
    Line 2
    Line 3
    Line 4
    ccccccccccccccccccccc
</textarea>
<script>
  var $textArea = $("#textarea-container");

// Re-size to fit initial content.
resizeTextArea($textArea);

// Remove this binding if you don't want to re-size on typing.
$textArea.off("keyup.textarea").on("keyup.textarea", function() {
    resizeTextArea($(this));
});

function resizeTextArea($element) {
    $element.height($element[0].scrollHeight);
}
</script>
  </body>
</html>

这里有一些文本存在于文本区域及其滚动中。我需要在这里文本区域的高度将根据其中存在的内容扩展，并且不会滚动。

【问题讨论】：

impressivewebs.com/demo-files/textarea-auto-resize 如果上面的链接正是您想要的。这是完整代码的链接。 impressivewebs.com/textarea-auto-resize谢谢

标签： jquery html css

【解决方案1】：

我创建了一个简化的示例。它获取textarea 元素的scrollHeight 属性并根据它设置内部高度。 overflow-y: hidden 很重要，否则 scrollHeight 属性会与垂直滚动条一起计算。

// Set height after page has loaded
adjustTextAreaHeight($('#textarea-container'));

// Attach keydown event
$('#textarea-container').on('keydown', adjustTextAreaHeight);

function adjustTextAreaHeight(ta) {
  if (!ta.length) {
    ta = $(this);
  }
  // Get full scroll height of text area element
  var scrollHeight = ta.prop('scrollHeight');
  // Some browsers do not shrink element, so we set 0 height at first
  ta.innerHeight(0)
    .innerHeight(scrollHeight);
}

#textarea-container {
  overflow-y: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<h1>Hello</h1>
<textarea id="textarea-container">
    Line 1
    Line 2
    Line 3
    Line 4
    ccccccccccccccccccccc
</textarea>

【讨论】：