有没有一种方法可以使文本区域在不使用PHP或JavaScript的情况下进行扩展以适合其内容？

97

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

是否可以使其拉伸以适合CSS的内容（例如overflow:showdiv）？

html css

— 意义
source

1

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

— starbeamrainbowlabs

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

— yashas123

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

— 奥利弗

42

并不是的。通常使用javascript完成此操作。

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

使用原型自动调整文本区域

— 里克·海伍德
source

219

仅一行

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

— 马丁·普雷斯顿
source

8

这怎么只有两票呢。这真是不可思议的马丁。我只花了30分钟尝试解决这个问题。做得好。

— 菲利普·达芬尼

31

这很棒。我只想补充一下，将更this.scrollHeight + "px"改为this.scrollHeight + 3 + "px"可使文本区域足够大，以使其不显示滚动条。

— 马丁

问题：当用户编写足够的内容向下滚动时，每次使用Enter添加新行时，它将重置滚动位置。

— 哥斯达黎加

5

我知道这是一个老问题，但是我在编辑页面上有一个textarea，并且在页面加载时已经有一个值，那么如何使它扩展以适合内容呢？

— Arootin Aghazaryan

1

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

— Magnus Eriksson

6

这是一个适用于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>'));

注意： op要求使用不使用Javascript的解决方案，但是这对遇到此问题的许多人都将有所帮助。

— 克里斯·杜特罗
source

5

这是一个非常简单的解决方案，但对我有用：

<!--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>

展开摘要

— 尼克
source

2

框的高度随着每次击键而增加，而不仅仅是换行。甚至退格和删除都会导致高度增加。修复，您将获得投票赞成。

— Birrel

某些浏览器（例如IE）无法正确计算滚动高度，这可能会导致此类问题。没关系，Chrome浏览器中也正在发生这种情况……

— KthProg

1

这是解决方法（编辑队列已满）：

<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：stackoverflow.com/questions/10722058/…–

— KthProg

3

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

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

展开摘要

— 克鲁蒂卡·帕特尔（Krutika Patel）
source