【发布时间】：2020-07-07 12:06:58
【问题描述】：
目标：
我正在寻找一种在 javaScript/jQuery 中调整 textarea 大小的方法，以便它最初显示其所有文本内容、隐藏垂直滚动条并显示调整大小句柄。
下面的代码首先显示带有一些内容的文本区域，但不足以显示垂直滚动条。这很好，除了我希望 textarea 看起来像这样，无论它包含多少文本，即不显示垂直滚动条。
当您单击按钮时，会添加更多文本并显示垂直滚动条，这是我最初说的内容过多时要避免的 - 文本区域应该扩展以适应它，我尝试这样做与接下来的两个按钮点击。
再次单击该按钮会使文本区域变宽，因此当前行都不换行。
再次单击该按钮，现在会使文本区域变高，因此不再显示垂直滚动条。
但是，textarea 增长过多，并且在文本的最后一行和 textarea 的底线之间出现了间隙。不是我想要的。
如果textarea的scrollHeight代表textarea内容的整个高度，并且底部没有空行，为什么会有空隙？
const text = 'This is a line of text';
var $textarea = $( '#example' );
var i = 0;
$textarea.val( $textarea.val() + text );
for( var l = i + 5 ; i < l; ++i )
$textarea.val( $textarea.val() + "\r\n" + text + '(' + i + ')' );
function doIt( This ) {
if( This.innerText !== 'Click Me Again' ) {
for( var l = i + 5 ; i < l; ++i )
$textarea.val( $textarea.val() + "\r\n" + text + '(' + i + ')' );
if( This.innerText === 'Click Me' ) {
This.innerText = 'Click Me Again';
$( 'p' ).text( 'to make the textarea\s width wider.' );
}
else {
$textarea.css( 'height', 'auto' ); // As per Mr Khan's sugestion.
$textarea.css( 'height', $textarea[ 0 ].scrollHeight + 'px' );
$( 'p' ).html( '<b>Why is there space below the last line of text?</b>' );
}
}
else {
This.innerText = 'Click Me Some More';
$textarea.css( 'width', ( $textarea.width() + 36 ) + 'px' );
$( 'p' ).text( 'to make the textarea\'s height taller and add more text.' );
}
}#example { width: 185px; height: 100px; overflow: auto; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>jQuery getScrollBarWidth example</title>
</head>
<body>
<h1>Snippet Example</h1>
<button onclick="doIt( this );">Click Me</button><br />
<p>to add more text to the textarea.</p>
<textarea id="example"></textarea>
</body>
</html>更新 当使用 Rows 选项时，codePen 最多可用于 1000 行。在 999 行之后，然后调整 textarea 的 rows 属性不再起作用，因为每行换行为两行，所以在 999 之后，行可能需要将 2 添加到 rows 属性（未测试）以防止显示垂直滚动条，但向上到 999 行几乎可以满足任何情况。 谢谢。
【问题讨论】：
标签： javascript jquery html css autoresize