代码之家 › 专栏 › 技术社区 › Darkenwolf

我可以使文本区域随文本一起增长到最大高度吗?

textarea css html

Darkenwolf · 技术社区 · 12 年前

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

5 回复 | 直到 12 年前

Sandro Paganotti 12 年前

您可以使用 contenteditable 让用户直接输入 div ,这里有一个演示: http://jsfiddle.net/gD5jy/

HTML格式

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

CSS格式

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

olivergeorge 10 年前

有一篇关于这个话题的优秀文章: Expanding Text Areas Made Elegant

colmtuite 10 年前

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

它对我来说很好

Baro 4 年前

我创建的最佳解决方案( on developer.mozilla.org )使用Javascript,并适合在一行中使用,并具有一定的风格。

单独的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>

-1

GavinGoGaming 3 年前

老帖子,但这是谷歌上的最高结果,所以让我分享我的简单答案。

我只是做了一个每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>