Question

我正在开发一个项目，我可以在div中使用各种大小的数据。当用户点击其中一个div时，需要变成可编辑的textarea。宽度是恒定的，但我希望高度从原始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

这是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 3

有关此主题的优秀A List Apart文章：Expanding Text Areas Made Elegant

Answer 4

我用 Javascript 创立的最佳解决方案 (on 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>

我可以将textarea与文本一起增长到最大高度吗？

4 个答案:

HTML

CSS