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

huangapple
go评论97阅读模式
英文:

How can I make a textarea expand automatically to a maximum height?

问题

Sure, here's the translated CSS code:

  1. .outerdiv {
  2.   height: auto;
  3.   display: flex;
  4. }
  6. .outerdiv textarea {
  7.   height: 100%;
  8.   flex-grow: 1;
  9. }

Please note that code translation is provided as requested, without any additional information or responses.

英文:

I am learning CSS. I have a div which contains a flexible textarea. Now I want the textarea and outer div to auto expand height when the user inputs multiline content in the textarea, and when the textarea is more than 3 rows, stop the expand and scroll the textarea. How should I write the CSS?

Rendered Code:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. .outerdiv {
  2.   height: auto;
  3.   display: flex;
  4. }
  6. .outerdiv textarea {
  7.   height: 100%;
  8.   flex-grow: 1;
  9. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;outerdiv&quot;&gt;
  2.   &lt;textarea&gt;&lt;/textarea&gt;
  3. &lt;/div&gt;

<!-- end snippet -->

答案1

得分: 2

我不认为有一种 CSS 解决方案。

然而，这段 JavaScript 代码实现了你想要的功能：

  1. function updateTextarea() {
  2.    var textarea = document.getElementById("textarea");
  3.     // 获取文本区域的行高
  4.    var lht = parseInt($('textarea').css('lineHeight'), 10);
  5.     // 获取行数
  6.    var scrlht = textarea.scrollHeight;
  7.    var lines = Math.floor(scrlht / lht);
  8.    
  9.    if (lines < 4) {
  10.     textarea.style.height = '15px';
  11.     textarea.style.height = (lines * lht) + 'px';
  12.    }
  13. }

CSS 部分如下：

  1. textarea {
  2. line-height: 15px;
  3. height: 15px;
  4. }

HTML 部分如下：

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

它在删除文本时不会使文本区域变小，但在输入时会增长。

英文:

I don't think there is a css solution.

However this JS kinda does what you want:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. function updateTextarea() {
  2.    var textarea = document.getElementById(&quot;textarea&quot;);
  3.     // Get line height of the textarea
  4.    var lht = parseInt($(&#39;textarea&#39;).css(&#39;lineHeight&#39;),10);
  5.     // Get lines 
  6.    var scrlht = textarea.scrollHeight;
  7.    var lines = Math.floor(scrlht / lht);
  8.    
  9.    if (lines &lt; 4) {
  10.     textarea.style.height = &#39;15px&#39;
  11.     textarea.style.height = (lines * lht) + &#39;px&#39;
  12.    }
  13.  }

<!-- language: lang-css -->

  1. textarea {
  2. line-height: 15px;
  3. height: 15px;
  4. }

<!-- language: lang-html -->

  1. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  2. &lt;div&gt;
  3.   &lt;textarea id=&#39;textarea&#39; oninput=&quot;updateTextarea()&quot;&gt;&lt;/textarea&gt;
  4. &lt;/div&gt;

<!-- end snippet -->

It does not make the texarea smaller when removing text. But it does grow when you type.

答案2

得分: 2

You could adapt this absolute gem of an answer as follows:

  1. <!-- 开始代码段: 不隐藏，显示控制台，不使用Babel编译 -->
  3. <!-- 语言: CSS -->
  5. textarea {
  6.   height: 1rem;
  7. }
  9. <!-- 语言: HTML -->
  11. <textarea 
  12.   data-max-height="48" 
  13.   name="text" 
  14.   oninput='this.style.height = "";this.style.height = Math.min(this.scrollHeight, this.getAttribute("data-max-height")) + "px"'
  15. >
  16. </textarea>
  18. <!-- 结束代码段 -->
  20. [1]: https://stackoverflow.com/a/48460773/12571484
英文:

You could adapt this absolute gem of an answer as follows:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. textarea {
  2.   height: 1rem;
  3. }

<!-- language: lang-html -->

  1. &lt;textarea 
  2.   data-max-height = &quot;48&quot; 
  3.   name=&quot;text&quot; 
  4.   oninput=&#39;this.style.height = &quot;&quot;;this.style.height = Math.min(this.scrollHeight, this.getAttribute(&quot;data-max-height&quot;)) + &quot;px&quot;&#39;
  5.   &gt;
  6. &lt;/textarea&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月24日 22:33:54
  • 转载请务必保留本文链接：https://go.coder-hub.com/76324678.html
  • css
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定