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

Question

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

3

我需要让文本框随着文字填充而增加高度。之前我使用过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属性。这会引起其他问题（但需要很长时间才能解释原因）。

感谢 - Gaweyne 编辑：如果纯CSS不可能，那么我接受使用JavaScript或JQuery的解决方案，不需要下载其他插件。

- user5102448

1

请看这里：https://dev59.com/ElnUa4cB1Zd3GeqPeNXf - Akul Von Itram

请注意，您的 each 方法没有任何作用。它将 80 传递给 expandingTextBox(e)，而函数内部的 $(e) 将返回一个空集合。 - Rick Hitchcock

1

@RickHitchcock 是的，我认为你是正确的。这是我在别人的解决方案上摆弄，直到我能让文本区域的最小高度为80px的结果。无论有没有80-虽然毫无意义，问题仍然存在。D: - user5102448

@RickHitchcock。是的，那正是问题所在。它适用于现有的文本区域，而不适用于动态创建的文本区域。 - user5102448

有趣的问题。我尝试了不同的属性，如display、height、-moz-appearance、-moz-binding、resize和许多其他属性，但是我无法改变高度。是什么导致可编辑div（或pre）出现问题？ - Mr Lister

显示剩余3条评论

3个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rick Hitchcock · Answer 1

使用事件委托来处理动态添加的元素。
将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

.textarea {
display: block;
overflow: hidden;
resize: both;
text-align: left;
min-height: 40px;
line-height: 20px;
padding: 0.5rem !important;
border: 1px solid rgb($lightmain, 0.5) !important;
background-color: white;
&:focus {
    border-color: $lightmain !important;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 5px $lightmain 
    !important;
   }
 }
.textarea[contenteditable]:empty::before {
  content: "Placeholder still possible";
  color: gray;
 }
<span class="textarea"  contenteditable></span>

- Steevan · Answer 3

希望这能对你有所帮助。

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