如何仅使用 CSS 使 textareas 自动调整大小？答案

【问题标题】：How to make textareas auto-resize using just CSS?如何仅使用 CSS 使 textareas 自动调整大小？
【发布时间】：2015-07-21 21:14:38
【问题描述】：

我需要增加一个 textarea 的高度，因为它填充了文本。我以前为此有一个 JavaScript/JQuery 解决方案

 function expandingTextBox(e) {
  $(e).css({'height':'80', 'overflow-y':'hidden'}).height(e.scrollHeight);
 }
 $('textarea').each(function(){
   expandingTextBox(80);
 }).on('input', function() {
    expandingTextBox(this);
 });

而这几乎达到了目的。简而言之，我的 Web 应用程序中有一个弹出窗口，我希望能够从其他地方拖动对象，并将它们转储到我的弹出窗口中，创建新的文本区域，调整大小以适应它们的内容。此函数仅在我输入文本区域时调整其大小。

一位同事认为我可以仅使用 CSS 来做到这一点——没有 JavaScript 或 JQuery 插件？我在互联网上找到的所有其他解决方案都至少依赖于一些 JQuery 插件（而且我无法轻松地将新插件下载到我的机器上）。有没有办法只使用 CSS？

我尝试将 textareas 更改为 div，并使用 contenteditable 属性。这在其他地方造成了问题（但需要很长时间才能解释原因）。

谢谢 -- 高文

编辑：如果纯 CSS 不可能，我会接受使用 JavaScript 或 JQuery 的解决方案，我不需要下载额外的插件。

【问题讨论】：

看这里：stackoverflow.com/questions/6907220/css-textarea-size
请注意，您的 each 方法没有任何作用。它将80 传递给expandingTextBox(e)，而函数内的$(e) 将返回一个空集合。
不是同一个问题 Akul，但谢谢。该线程中的海报希望文本框水平扩展。提供给他的解决方案不起作用，第二个需要一个 JQuery 插件，我无法在我的机器上下载该插件。但是，如果有人问我到底在问什么，而我只是想念它，请告诉我。
不要认为这仅在 CSS 中是可能的。您的代码是否适用于现有的 textareas，但不适用于动态代码？
@RickHitchcock 是的，我认为你是对的。这是我摆弄别人的解决方案的结果，直到我可以让 textareas 的最小高度为 80px。不管有没有 80 存在——尽管它毫无意义——问题仍然存在。 D：

标签： css textarea autoresize

【解决方案1】：

使用event delegation 处理动态添加的元素。
将 CSS 移至样式表。
在输入时，将高度设置为 80，然后将其设置为滚动高度。

片段

$('button').on('click', function() {
  $('<textarea/>').appendTo('body').focus();
});

$(document).on('input', 'textarea', function() {
  $(this).height(80).height(this.scrollHeight);
});

textarea {
  vertical-align: top;
  height: 80px;
  overflow-y: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Add new textarea</button>
<hr>
<textarea></textarea>

【讨论】：

我或许可以实现这一点。我会向您展示更多我的代码，但在我们正在构建的应用程序的上下文之外它没有意义：s 我会回复您...
我做了一些稍微不同的事情，因为我无法完全实现它。尽管如此，这非常有效。你赢得最佳答案。 提示 Fedora.

【解决方案2】：

希望这会对你有所帮助。

http://jsfiddle.net/Tw9Rj/463/

textarea#note {
    width:100%;
    direction:rtl;
    display:block;
    max-width:100%;
    line-height:1.5;
    padding:15px 15px 30px;
    border-radius:3px;
    border:1px solid #F7E98D;
    font:13px Tahoma, cursive;
    transition:box-shadow 0.5s ease;
    box-shadow:0 4px 6px rgba(0,0,0,0.1);
    font-smoothing:subpixel-antialiased;
    background:linear-gradient(#F9EFAF, #F7E98D);
    background:-o-linear-gradient(#F9EFAF, #F7E98D);
    background:-ms-linear-gradient(#F9EFAF, #F7E98D);
    background:-moz-linear-gradient(#F9EFAF, #F7E98D);
    background:-webkit-linear-gradient(#F9EFAF, #F7E98D);
}

【讨论】：

这些属性中的哪些可以满足 OP 的要求，其他属性有什么用？
李斯特先生所说的，并没有完全符合我的要求 O_o 你小提琴中的文本框不会在我输入时调整大小。它有一个滚动条。不要误会我的意思，它是一个漂亮的文本框，但是......