还有另一个关于这个的帖子，我试过了。但有一个问题:如果你删除内容，文本区域不会缩小。我找不到任何方法将其缩小到正确的大小- clientHeight值返回为文本区域的完整大小，而不是它的内容。
该页面的代码如下:
function FitToContent(id, maxHeight)
{
var text = id && id.style ? id : document.getElementById(id);
if ( !text )
return;
var adjustedHeight = text.clientHeight;
if ( !maxHeight || maxHeight > adjustedHeight )
{
adjustedHeight = Math.max(text.scrollHeight, adjustedHeight);
if ( maxHeight )
adjustedHeight = Math.min(maxHeight, adjustedHeight);
if ( adjustedHeight > text.clientHeight )
text.style.height = adjustedHeight + "px";
}
}
window.onload = function() {
document.getElementById("ta").onkeyup = function() {
FitToContent( this, 500 )
};
}
那些想要在Angular的新版本中实现同样功能的人。
抓取文本区域元素引用。
@ViewChild('textArea', { read: ElementRef }) textArea: ElementRef;
public autoShrinkGrow() {
textArea.style.overflow = 'hidden';
textArea.style.height = '0px';
textArea.style.height = textArea.scrollHeight + 'px';
}
<textarea (keyup)="autoGrow()" #textArea></textarea>
我还添加了另一个用例，可能方便一些用户阅读线程，当用户想增加文本区域的高度到一定高度，然后有溢出:滚动它，上面的方法可以扩展到实现上述用例。
public autoGrowShrinkToCertainHeight() {
const textArea = this.textArea.nativeElement;
if (textArea.scrollHeight > 77) {
textArea.style.overflow = 'auto';
return;
}
else {
textArea.style.overflow = 'hidden';
textArea.style.height = '0px';
textArea.style.height = textArea.scrollHeight + 'px';
}
}
这适用于我(Firefox 3.6/4.0和Chrome 10/11):
var observe;
if (window.attachEvent) {
observe = function (element, event, handler) {
element.attachEvent('on'+event, handler);
};
}
else {
observe = function (element, event, handler) {
element.addEventListener(event, handler, false);
};
}
function init () {
var text = document.getElementById('text');
function resize () {
text.style.height = 'auto';
text.style.height = text.scrollHeight+'px';
}
/* 0-timeout to get the already changed text */
function delayedResize () {
window.setTimeout(resize, 0);
}
observe(text, 'change', resize);
observe(text, 'cut', delayedResize);
observe(text, 'paste', delayedResize);
observe(text, 'drop', delayedResize);
observe(text, 'keydown', delayedResize);
text.focus();
text.select();
resize();
}
textarea {
border: 0 none white;
overflow: hidden;
padding: 0;
outline: none;
background-color: #D0D0D0;
}
<body onload="init();">
<textarea rows="1" style="height:1em;" id="text"></textarea>
</body>
如果你想试试jsfiddle
它从一行开始，只增加所需的确切数量。对于一个单一的文本区域是可以的，但是我想写一些东西，我将有很多很多这样的文本区域(大约像一个大文本文档中通常有行一样多)。在这种情况下，它真的很慢。(在Firefox中，它慢得离谱。)所以我真的很喜欢使用纯CSS的方法。这将是可能的contentteditable，但我希望它是纯文本。
我创建了一个小的(7kb)自定义元素，为您处理所有这些调整大小的逻辑。
它可以在任何地方工作，因为它是作为自定义元素实现的。包括:虚拟dom (React, Elm等)，服务器端呈现的东西，如PHP和简单乏味的HTML文件。
除了监听输入事件外，它还有一个计时器，每100毫秒触发一次，以确保在文本内容通过其他方式发生变化的情况下，事情仍在工作。
下面是它的工作原理:
// At the top of one of your Javascript files
import "autoheight-textarea";
或作为脚本标记包含
<script src="//cdn.jsdelivr.net/npm/autoheight-textarea@1.0.1/dist/main.min.js"></script>
然后像这样包装你的textarea元素
HTML文件
<autoheight-textarea>
<textarea rows="4" placeholder="Type something"></textarea>
<autoheight-textarea>
React.js组件
const MyComponent = () => {
return (
<autoheight-textarea>
<textarea rows={4} placeholder="Type something..." />
</autoheight-textarea>
);
}
下面是Codesandbox上的一个基本演示:https://codesandbox.io/s/unruffled-http-2vm4c
你可以在这里获取软件包:https://www.npmjs.com/package/autoheight-textarea
如果你只是想看看调整大小的逻辑，你可以看看这个函数:https://github.com/Ahrengot/autoheight-textarea/blob/master/src/index.ts#L74-L85
