Question

我需要一个帮助。我需要根据其中写入的内容修复textarea高度。我在下面解释我的代码。

<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>

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

Answer 1

我创建了一个简化的例子。它获得scrollHeight元素的textarea属性，并根据它设置内部高度。 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>

如何使用HTML和Jquery按文本修复textarea高度

1 个答案: