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

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文章:扩展优雅的文本区域