如何仅使用 CSS 使文本区域自动调整大小？

Question

我需要增加文本区域的高度，因为它会填充文本。我之前有一个 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?

我试过将文本区域更改为 div，并使用 contenteditable 属性。这在其他地方引起了问题（但需要很长时间才能解释原因）。

谢谢 -- 盖维恩

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

Answer 1

希望对您有所帮助。

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);
}

Answer 2

使用event delegation处理动态添加的元素。
将 CSS 移动到样式 sheet。
输入时，将高度设置为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>

如何仅使用 CSS 使文本区域自动调整大小？

How to make textareas auto-resize using just CSS?

css

textarea

autoresize