Question

我需要在填充文字时增加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应用程序中有一个弹出窗口，我希望能够从其他地方拖动对象，并将它们转储到我的弹出窗口中，创建新的textareas，调整大小以适应其内容。此函数仅在我输入时调整textareas的大小。

一位同事认为我可以单独用CSS做这件事 - 没有JavaScript或JQuery插件？我在interwebs上找到的所有其他解决方案至少依赖于一些JQuery插件（我无法在工作中轻松地将新插件下载到我的机器上）。有没有办法只用CSS？

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

THX - Gaweyne

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

Answer 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>

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

如何使用CSS自动调整textareas的大小？

2 个答案: