我想创建一个自动增长的文本区域，所以我使用this指导。它运行良好，但有一个小问题。当您插入大文本并删除它们时，文本区域的大小超出了应有的大小。
每插入一个字符，大小就会减少 1-2 像素，因此插入几个字符后，高度就会再次恢复正常。
要重新创建错误的滚动高度，请插入 'a\n b \n c \n d \ne' 进入文本区域。现在将其全部删除。文本区域保持比现在需要的更大的尺寸。对于每个插入的字符，文本区域都会将其大小调整为正确的值。
$("#message-box").on('input', function() {
var scroll_height = $("#message-box").get(0).scrollHeight;
$("#message-box").css('height', scroll_height + 'px');
$("body > p").remove();
$("body").append("<p>ScrollHeight: " + scroll_height + "</p>");
});
#message-box {
resize: none;
width: 400px;
min-height: 20px;
padding: 5px;
overflow: hidden;
box-sizing: border-box;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="message-box"></textarea>
这是 CodePen 中的示例
如何在删除大文本后立即将文本区域调整为尽可能小的值？
快速将其重置为auto在去之前scrollHeight并重新分配它：
const $mBox = $("#message-box");
$mBox.on('input', function() {
$(this).height('auto');
$(this).height($(this).prop('scrollHeight'));
}).trigger('input');
#message-box {
resize: none;
width: 100%;
box-sizing: border-box;
padding: 5px;
}
<textarea id="message-box"></textarea>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
