如何自動向上擴展文本區域？

Question

我在卡片頁腳上有一個自動擴展的文本區域。 https://jsfiddle.net/6f9a52we/

與其向下擴展，我可以讓它向上擴展嗎？ 所以當它向上擴展時，卡體應該收縮。 正如我們在 Gmail 聊天中看到的那樣。

我嘗試使用position: absolute; 和底部：0px； . 在這種情況下，向上擴展工作得很好，但是由於絕對 position，擴展的文本區域覆蓋了卡體中的文本。 請在不使用position:absolute 的情況下提出任何想法？

<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="card">
    <div class="card-body">
        card body line 1<br>
        card body line 2<br>
        card body line 3<br>
        card body line 4<br>
        card body line 5
    </div>
    <div class="card-footer">
      <textarea id="myTextArea" placeholder="type here"></textarea>
   </div>
</div>
</body>
</html>

$(function() {
  $('#myTextArea').on('input keyup paste', function() {
    var $el = $(this),
        offset = $el.innerHeight() - $el.height();

    if ($el.innerHeight() < this.scrollHeight) {
      // Grow the field if scroll height is smaller
      $el.height(this.scrollHeight - offset);
    } else {
      // Shrink the field and then re-set it to the scroll height in case it needs to shrink
      $el.height(1);
      $el.height(this.scrollHeight - offset);
    }
  });
});

  .card{
        text-align: center;
        width: 50%;
        margin:0 auto;
    }
    .card-body{
        overflow-y: auto;
        height: 150px;
    }

Answer 1

為您的 class 卡添加最大高度。

  .card{
    text-align: center;
    width: 50%;
    max-height: 250px;
    margin:0 auto;
}

如何自動向上擴展文本區域？

問題描述

1 個解決方案

解決方案1
0 2022-01-24 15:42:23

如何自動向上擴展文本區域？

問題描述

1 個解決方案

解決方案1 0 2022-01-24 15:42:23

解決方案1
0 2022-01-24 15:42:23