html - 我可以使文本区域与文本一起增长到最大高度吗？

Question

我正在做一个项目，我在 div 中有各种大小的数据。当用户点击其中一个 div 时，它需要变成一个可编辑的文本区域。宽度是恒定的，但我希望高度从原始 div 的高度开始，然后在添加滚动条之前增长到最大高度。那可能吗？

Answer 1

您可以使用contenteditable并让用户直接输入div，这是一个演示：http: //jsfiddle.net/gD5jy/

HTML

<div contenteditable>
    type here...
</div>

CSS

div[contenteditable]{
    border: 1px solid black;
    max-height: 200px;
    overflow: auto;
}

Answer 2

有一篇关于这个主题的优秀的 A List Apart 文章：Expanding Text Areas Made Elegant

Answer 3

这是JavaScript函数

// TextArea is the Id from your textarea element
// MaxHeight is the maximum height value
function textarea_height(TextArea, MaxHeight) {
    textarea = document.getElementById(TextArea);
    textareaRows = textarea.value.split("\n");
    if(textareaRows[0] != "undefined" && textareaRows.length < MaxHeight) counter = textareaRows.length;
    else if(textareaRows.length >= MaxHeight) counter = MaxHeight;
    else counter = 1;
    textarea.rows = counter; }

这是CSS样式

.textarea {
height: auto;
resize: none; }

这是HTML代码

<textarea id="the_textarea" onchange="javascript:textarea_height(the_textarea, 15);" width="100%" height="auto" class="textarea"></textarea>

这对我来说可以

Answer 4

我用 Javascript 创建的最好的解决方案（在 developer.mozilla.org 上），并且适合在一行中使用，并且有点风格。

单独的 Javascript 仅对演示的自动编写有用。

/*
      AUTO TYPE TEXT FROM THIS S.O. ANSWER: 
          https://stackoverflow.com/a/22710273/4031083
          Author @Mr.G
*/
var demo_input = document.getElementById('txtArea');

var type_this = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed blandit turpis, eu auctor arcu.\r\n\r\nCras iaculis urna non vehicula volutpat. Nullam tincidunt, ex sit amet commodo pulvinar, lorem ex feugiat elit, non eleifend nisl metus quis erat.";
var index = 0;

window.next_letter = function() {
    if (index <= type_this.length) {
        demo_input.value = type_this.substr(0, index++);
        demo_input.dispatchEvent(new KeyboardEvent('keyup'));
        setTimeout("next_letter()", 50);
    }
}

next_letter();

<!-- THE MAIN PART -->
<textarea 
  id = "txtArea"
  cols="20" 
  rows="4" 
  onkeyup="if (this.scrollHeight > this.clientHeight) this.style.height = this.scrollHeight + 'px';"
  style="overflow:hidden;
         transition: height 0.2s ease-out;">
         
</textarea>