Javascript 如何自动调整html5 textarea元素的大小以适应初始内容？

目标：

我正在javaScript/jQuery中寻找一种方法来调整textarea的大小，以便它最初显示其所有文本内容，隐藏垂直滚动条，并显示调整大小句柄

下面的代码首先显示包含一些内容的文本区域，但不足以显示垂直滚动条。这将是好的，除了我希望文本区域看起来像这样，无论它包含多少文本，这是显示没有垂直滚动条

当您单击按钮时，会添加更多的文本，并显示垂直滚动条，这是我最初说的内容太多时要避免的——文本区域应该扩展以适应它，我尝试在接下来的两次单击按钮时执行此操作

再次单击该按钮会使文本区域变宽，因此当前行都不会换行

再次单击按钮，现在会使文本区域变得更高，因此垂直滚动条不再显示

但是，textarea增长过快，最后一行文本和textarea的底线之间会显示一个间隙。不是我想要的

如果textarea的scrollHeight表示textarea内容的整个高度，并且底部没有空行，为什么会有间隙

const text='这是一行文本'；
var$textarea=$（“#示例”）；
var i=0；
$textarea.val（$textarea.val（）+text）；
对于（var l=i+5；i

#示例{宽度：185px；高度：100px；溢出：自动；}

jQuery getScrollBarWidth示例
片段示例
单击我

向文本区域添加更多文本

在设置

滚动高度之前，只需将高度设置为自动，就可以开始了

$textarea.css( 'height', 'auto' );
$textarea.css( 'height', $textarea[ 0 ].scrollHeight + 'px' );

工作示例：


const text='这是一行文本'；
var$textarea=$（“#示例”）；
var i=0；
$textarea.val（$textarea.val（）+text）；
对于（var l=i+5；i把这个加在这里
$textarea.css（'height'，$textarea[0].scrollHeight+'px'）；//====>把这个加在这里
函数doIt（This）{
如果（This.innerText！=“再次单击我”）{
对于（var l=i+5；i


单击我

向文本区域添加更多文本

Khan先生，谢谢您的回复。我用你建议的更改更新了我的演示代码，但是新的代码行并没有消除这个差距。我在Windows 10中使用最新版本的Chrome。这可能是您建议的更改没有解决我的问题的原因吗？删除此项，它将开始工作35;示例{宽度：185px；高度：100px；}更新了我的答案在插入的初始文本之后添加自动高度以显示，但实际上没有滚动。不要用css给出初始高度。谢谢你在这个问题上的放松，是的，我看到你的建议确实有效。“我的更新”适用于多达1000行，其中每行可以放在一行上，但“我的更新”即使在不需要放在一行上的情况下也可以工作，这更自然。再次感谢。很乐意帮忙：）