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

Posted 2023-05-07

【中文标题】我可以使文本区域与文本一起增长到最大高度吗？

【英文标题】：Can I make a textarea grow with text to a max height?

【发布时间】：2013-03-28 12:20:35

【问题描述】：

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

【问题讨论】：

最大高度是多少？

是的，这听起来可能。你需要javascript来做到这一点。

【参考方案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;

【讨论】：

请注意，contenteditable 在不同浏览器上呈现完全不同的 HTML，尤其是在换行时。

@DanielAllenLangdon 说得对。我用pre 替换了div，并在Chrome 中得到了我想要的换行和换行。当我看到他的评论时，我检查了 Firefox，最后不得不将 white-space: pre-wrap 添加到我的 CSS 中。我没有尝试其他浏览器。

如果由于 React 限制我不能使用 contenteditable 怎么办？由于延迟状态更新，我也无法使用 Draft.js。

这个 contenteditable div 是否接受任何 dom 事件？我将如何捕捉这个 div 中的 innerHTML 的变化？

【参考方案2】：

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

【讨论】：

感谢您的链接！很棒的文章。我认为你至少应该用几句话解释作者是如何做到的——在读者点击链接之前给他们一些背景信息。否则，根据 Stack Overflow 礼仪，您的帖子作为评论会更好。另外，为了节省人们调试的时间，我需要将container.className += "active"; 更改为container.className += " active"; 以使作者的代码正常工作。

【参考方案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);"   class="textarea"></textarea>

对我来说很好用

【讨论】：

如果textarea 不包含换行符，只是换行怎么办？

我只是从一个旧项目中复制了这段代码...但是可以根据您的需要更改代码...也许您可以每 40 个标志拆分一次代码

错误的解决方案。如果用户不使用回车怎么办？

为我工作，我的情况几乎没有变化。函数 ResizeTextBox(elm) var rowcount = $(elm).attr('rows'); var textareaRows = $(elm).val().split("\n"); if (textareaRows[0] != "undefined" && textareaRows.length

【参考方案4】：

我用 Javascript 创立的最佳解决方案 (on developer.mozilla.org) 并适应了在一行中使用并有点风格。

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

/*
      AUTO TYPE TEXT FROM THIS S.O. ANSWER: 
          https://***.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>

【讨论】：

如果用户想要编辑他刚刚键入的内容并开始在文本开头添加行，则它不起作用。因为滚动不会高于高度。