有没有办法在不使用 PHP 或 JavaScript 的情况下让 textarea 拉伸以适应其内容？

Posted 2023-03-06

【中文标题】有没有办法在不使用 PHP 或 JavaScript 的情况下让 textarea 拉伸以适应其内容？

【英文标题】：Is there a way to get a textarea to stretch to fit its content without using PHP or JavaScript?

【发布时间】：2011-02-17 17:36:36

【问题描述】：

我正在用内容填充文本区域以供用户编辑。

是否可以使用 CSS 使其拉伸以适应内容（例如 overflow:show 用于 div）？

【问题讨论】：

没有人有一个没有任何不使用框架的错误的答案吗？ :-(

我只是使用 css max-width:100% ，它会自动适合一个盒子。有什么问题吗？

这是一个现代解决方案（使用一行 JS 和一些 CSS 魔法）：codepen。

【参考方案1】：

与问题不是 100% 相关，因为这仅适用于 Angular。

有一个与 Angular 相关的 npm 包，名为 @angular/cdk（如果使用 Angular Material Design）。这个包中包含一个属性，它可以关联到一个名为 cdkTextareaAutosize 的textarea。这会自动将textarea 设置为1 行，并相应地拉伸textarea 以适应内容。如果你正在使用这个库，这样的东西应该可以工作。

<textarea 
  maxLength="200"
  cdkTextareaAutosize
  type="text">
</textarea>

【参考方案2】：

只有一行

<textarea name="text" oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'></textarea>

【讨论】：

这怎么只有两票。这是不可思议的马丁。我只花了 30 分钟试图解决这个问题。伟大的工作。

这很棒。我想补充一点，将 this.scrollHeight + "px" 更改为 this.scrollHeight + 3 + "px" 会使 textarea 大到足以让它不显示滚动条。

问题：当用户写了足够多的内容可以向下滚动时，它会在每次使用 Enter 添加新行时重置滚动位置。

我知道这是一个老问题，但是我在编辑页面上有一个文本区域，并且在页面加载时它已经有一个值，那么我怎样才能让它扩展以适应内容呢？跨度>

@ArootinAghazaryan - 您可能已经想出了一个解决方案，但对其他人来说：只需使用调整大小代码创建一个函数，而不是将其内联在 html 中。然后您可以在页面加载时调用相同的函数。

【参考方案3】：

React的解决方案

我使用了正在显示的文本的长度，并将该数字除以 30（我调整了这个数字，直到我的 App 感觉正确）

array.map((text) => (
    <textarea                
     rows=text.length / 30
     value=text
    ></textarea>
 )

【参考方案4】：

或者，您可以使用contenteditable 元素，这将适合里面的文本。

<div contenteditable>Try typing and returning.</div>

请注意，如果不使用一些 javascript，则无法在表单中发送此值。 contenteditable 也可能会生成 HTML 内容并允许样式化，因此可能需要在提交表单时将其过滤掉。

【讨论】：

这对我来说是最好的解决方案

【参考方案5】：

这里的答案很好，但缺少我必须添加的一段代码，以避免在您第一次键入时不受欢迎的缩小：

var $textareas = $('textarea');
$textareas.each(function()  // to avoid the shrinking
    this.style.minHeight = this.offsetHeight + 'px';
);

$textareas.on('input', function() 
    this.style.height = '';
    this.style.height = this.scrollHeight + 'px';
);

【参考方案6】：

动态文本区域控制的另一个简单解决方案。

<!--JAVASCRIPT-->
<script type="text/javascript">
$('textarea').on('input', function () 
            this.style.height = "";
            this.style.height = this.scrollHeight + "px";
 );
</script>

【讨论】：

这不会使文本区域变小。有没有办法做到这一点？

【参考方案7】：

这是一个适用于 jQuery 的函数（仅适用于高度，不适用于宽度）：

function setHeight(jq_in)
    jq_in.each(function(index, elem)
        // This line will work with pure Javascript (taken from NicB's answer):
        elem.style.height = elem.scrollHeight+'px'; 
    );

setHeight($('<put selector here>'));

注意： 该操作要求提供不使用 Javascript 的解决方案，但这应该对遇到此问题的许多人有所帮助。

【参考方案8】：

这是一个非常简单的解决方案，但它适用于我：

<!--TEXT-AREA-->
<textarea id="textBox1" name="content" TextMode="MultiLine" onkeyup="setHeight('textBox1');" onkeydown="setHeight('textBox1');">Hello World</textarea>

<!--JAVASCRIPT-->
<script type="text/javascript">
function setHeight(fieldId)
    document.getElementById(fieldId).style.height = document.getElementById(fieldId).scrollHeight+'px';

setHeight('textBox1');
</script>

【讨论】：

框的高度随着每一次击键而增加，而不仅仅是换行。即使退格和删除也会导致高度增加。修复，你就会得到支持。

某些浏览器（例如 IE）不能完全正确地计算滚动高度，这可能会导致此类问题。别介意我在 Chrome 中也会发生这种情况......

这是解决方案（编辑队列已满）：<style> textarea resize: none; overflow: auto; </style> <!--TEXT-AREA--> <textarea onkeyup="setHeight.call(this);">Hello World</textarea> <!--JAVASCRIPT--> <script type="text/javascript"> function setHeight() this.style.height = '1px'; this.style.height = this.scrollHeight + 'px'; </script> 基本上你必须先将高度设置为 1px，因为：***.com/questions/10722058/…

【参考方案9】：

不是真的。这通常使用 javascript 完成。

这里有一个很好的讨论方法......

Autosizing textarea using Prototype