Javascript 根据输入调整文本区域大小

我想创建一个自动增长的文本区域，所以我使用了guide。它工作得很好，但有一个小问题。当您插入大文本并删除它们时，文本区域的大小比它应有的大。 对于每个插入的字符，大小都会减少1-2像素，因此对于几个插入的字符，高度又是正确的

要重新创建工作滚动高度，请在文本区域中插入'a\n b\n c\n d\n e'。现在将其全部删除。文本区域保持比现在需要的更大的大小。对于每个插入的字符，textarea都会将其大小调整为正确的值

$（“#消息框”）.on（'input'，function（）{
var scroll_height=$（“#消息框”）.get（0）.scrollHeight；
$（“#消息框”）.css（'height'，scroll#u height+'px'）；
$（“body>p”）.remove（）；
$（“正文”）。追加（“ScrollHeight:“+scroll\u height+”
”；
});
#消息框{
调整大小：无；
宽度：400px；
最小高度：20px；
填充物：5px；
溢出：隐藏；
框大小：边框框；
}
快速将其重置为
自动
，然后转到
滚动高度
并重新评估：


const$mBox=$（“#消息框”）；
$mBox.on（'input'，function（）{
$（this.height（'auto'）；
$（this.height（$（this.prop（'scrollHeight'））；
}).触发器（“输入”）
#消息框{
调整大小：无；
宽度：100%；
框大小：边框框；
填充物：5px；
}
试试看，这将帮助您获得想要的输出。我已经在
调整大小
上更新了高度


messagebox（）；
函数messagebox（）{
变量文本=$（'.messagebox'）；
text.each（函数（）{
$（this.attr（'rows'，1）；
调整大小（$（此））；
});
text.on（'input'，function（）{
调整大小（$（此））；
});
函数调整大小（$text）{
$text.css（'height'，'auto'）；
$text.css（'height'，$text[0].scrollHeight+'px'）；
}
}
。消息框{
调整大小：无；
宽度：400px；
最小高度：20px；
填充物：5px；
溢出：隐藏；
框大小：边框框；
}