我正在开发一个项目，其中的 div 中的数据可以是各种大小。当用户单击其中一个 div 时，它需要变成一个可编辑的文本区域。宽度是恒定的，但我希望高度从原始 div 的高度开始，然后在添加滚动条之前增长到最大高度。这可能吗？
您可以使用
contenteditablediv<div contenteditable>
type here...
</div>
div[contenteditable]{
border: 1px solid black;
max-height: 200px;
overflow: auto;
}
有一篇关于此主题的优秀 A List Apart 文章：扩展文本区域变得优雅
这是 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>
对我来说效果很好
我用 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>我知道这个问题相当老了，但是我用来动态缩放
textareascrollToptextareawhilescrollTopif(textarea.scrollTop>0){
while(textarea.scrollTop>0){
textarea.rows++;
}
}
旧帖子，但这是谷歌上的最高结果，所以让我分享我的简单答案。
我只是做了一个每 200 毫秒运行一次的函数，更新文本区域。这是一个非常简单的方法，但它对我有用。
请忽略CSS！只是装饰用的。
function textarea_height() {
var textarea = document.getElementById("htmlinput");
textarea.rows = textarea.value.split("\n").length;
}
setInterval(textarea_height, 200);#htmlinput {
border-color: black;
border-radius: 15px;
border-width: 3.3px;
font-family: monospace;
background-color:lightgray;
width: calc(98%);
padding: 5.5px;
}<html>
<head>
<title> StackOverflowExample </title>
</head>
<body>
<textarea id="htmlinput">Here is my
Very Cool
Text Area
it even fits
to the lines of
the text!</textarea>
</body>
</html>