还有另一个关于这个的帖子，我试过了。但有一个问题:如果你删除内容，文本区域不会缩小。我找不到任何方法将其缩小到正确的大小- 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 )
};
}
一个更简单、更清晰的方法是:
// adjust height of textarea.auto-height
$(document).on( 'keyup', 'textarea.auto-height', function (e){
$(this).css('height', 'auto' ); // you can have this here or declared in CSS instead
$(this).height( this.scrollHeight );
}).keyup();
//和CSS
textarea.auto-height {
resize: vertical;
max-height: 600px; /* set as you need it */
height: auto; /* can be set here of in JS */
overflow-y: auto;
word-wrap:break-word
}
所有需要做的就是将.auto-height类添加到您想要的目标文本区域。
在FF, Chrome和Safari测试。如果这对你不起作用，请告诉我，不管是什么原因。但是，这是我发现的最简单明了的方法。而且效果非常好!: D
这适用于我(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
您正在使用当前clientHeight和内容scrollHeight的较高值。当您通过删除内容使scrollHeight变小时，计算区域不能变小，因为先前根据样式设置的clientHeight。高度，是撑开它。您可以使用scrollHeight的max()和预定义的或从textarea.rows中计算的最小高度值。
In general you probably shouldn't really rely on scrollHeight on form controls. Apart from scrollHeight being traditionally less widely-supported than some of the other IE extensions, HTML/CSS says nothing about how form controls are implemented internally and you aren't guaranteed scrollHeight will be anything meaningful. (Traditionally some browsers have used OS widgets for the task, making CSS and DOM interaction on their internals impossible.) At least sniff for scrollHeight/clientHeight's existance before trying to enable the effect.
另一种可能的替代方法来避免这个问题，如果重要的是，它可以更广泛地工作，可能是使用一个隐藏的div大小相同的文本区域的宽度，并设置在相同的字体。在keyup上，您将文本从文本区域复制到隐藏div中的文本节点(记住用换行符替换'\n'，如果使用innerHTML则正确转义'<'/'&')。然后简单地测量div的offsetHeight将给你你需要的高度。
MakeTextAreaResisable使用qQuery
function MakeTextAreaResisable(id) {
var o = $(id);
o.css("overflow-y", "hidden");
function ResizeTextArea() {
o.height('auto');
o.height(o[0].scrollHeight);
}
o.on('change', function (e) {
ResizeTextArea();
});
o.on('cut paste drop keydown', function (e) {
window.setTimeout(ResizeTextArea, 0);
});
o.focus();
o.select();
ResizeTextArea();
}
