css 如何使文本区域自动扩展到最大高度？

0vvn1miw 于 2023-05-30 发布在其他

关注(0)|答案(2)|浏览(198)

我正在学习CSS。我有一个包含灵活文本区域的div。现在，我希望当用户在文本区域中输入多行内容时，文本区域和外部div自动扩展高度，当文本区域超过3行时，停止扩展并滚动文本区域。我应该如何写CSS？
渲染代码：

.outerdiv {
  height: auto;
  display: flex;
}

.outerdiv textarea {
  height: 100%;
  flex-grow: 1;
}

<div class="outerdiv">
  <textarea></textarea>
</div>

css

来源：https://stackoverflow.com/questions/76324678/how-can-i-make-a-textarea-expand-automatically-to-a-maximum-height

2条答案

按热度按时间

qjp7pelc1#

我不认为有一个CSS解决方案。
然而，这个JS有点像你想要的：

function updateTextarea() {
   var textarea = document.getElementById("textarea");
    // Get line height of the textarea
   var lht = parseInt($('textarea').css('lineHeight'),10);
    // Get lines 
   var scrlht = textarea.scrollHeight;
   var lines = Math.floor(scrlht / lht);
   
   if (lines < 4) {
    textarea.style.height = '15px'
    textarea.style.height = (lines * lht) + 'px'
   }
 }

textarea {
line-height: 15px;
height: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <textarea id='textarea' oninput="updateTextarea()"></textarea>
</div>

删除文本时，它不会使texarea变小。但你打字的时候它会变大。

赞(0）回复(0）举报 2023-05-30

tquggr8v2#

您可以按如下方式调整this absolute gem of an answer：

textarea {
  height: 1rem;
}

<textarea 
  data-max-height = "48" 
  name="text" 
  oninput='this.style.height = "";this.style.height = Math.min(this.scrollHeight, this.getAttribute("data-max-height")) + "px"'
  >
</textarea>

赞(0）回复(0）举报 2023-05-30

我来回答

css 如何使文本区域自动扩展到最大高度？

2条答案

相关问题

热门标签

最新问答