Jquery 文本区域根据内容自动调整大小

因此，我有一个表单作为表单的一部分，用户将输入一个列表项。我决定尝试使用一些jQuery来扩展空间被填充时的高度。我已经让它以基本形式工作，但我似乎有一个问题，那就是每次调用keyup事件时，内容的高度都会增加，而不是在内容填充时。这是我的密码：

HTML:

最后，我的jQuery：

$('.list_header_itemInput').keyup(function() {
    $(this).css({ height: ($(this).height() + 2) });
});

---

为了得到预期的结果，我需要在代码中做哪些更改？

也许您可以使用elastic js： 并将此插件插入html文档

<script src="http://jquery-elastic.googlecode.com/svn/trunk/jquery.elastic.source.js"></script>

---

或许您可以使用弹性js？： 并将此插件插入html文档

<script src="http://jquery-elastic.googlecode.com/svn/trunk/jquery.elastic.source.js"></script>

---

您可以将textarea的高度设置为1px，然后测量scrollHeight（滚动条表示的像素数）。然后将文本区域的高度设置为scrollHeight+1

$('.list_header_itemInput').keyup(function() { 
    this.style.height = "1px";
    this.style.height = (this.scrollHeight + 1) + "px";
});

---

您可以将textarea的高度设置为1px，然后测量scrollHeight（滚动条表示的像素数）。然后将文本区域的高度设置为scrollHeight+1

$('.list_header_itemInput').keyup(function() { 
    this.style.height = "1px";
    this.style.height = (this.scrollHeight + 1) + "px";
});

---

有一些插件可以做到这一点，请查看它们的源代码。你不会在一行或两行代码中完成对不起，空间被填满意味着什么？你的意思是想阻止滚动条出现？“每次调用keyup事件时，滚动条的高度都会增加”-这可能是因为这正是你在代码中所做的…？正是我所希望的Roko@CBroe-它确实因此而增加，但是我增加它是为了防止滚动条出现…有一些插件可以做到这一点，请查看它们的源代码。你不会在一行或两行代码中完成对不起，空间被填满意味着什么？你的意思是想阻止滚动条出现？“每次调用keyup事件时，滚动条的高度都会增加”-这可能是因为这正是你在代码中所做的…？正是我所希望的Roko@CBroe-它确实因此而增加，但我增加它是为了防止滚动条出现…完美！谢谢你的帮助！仅在Chrome中进行了测试，但将高度设置为0，然后不添加任何内容似乎也能正常工作……同样在Chrome中，我注意到当按下enter键时，滚动条会在一瞬间显示出来，因此，一旦高度调整，文本会上下跳跃。在这里，我尝试通过在enter的On KeyDown高度中添加一个值来解决这个问题：–尽管这感觉有点糟糕，因为我添加的9是一个通过测试不同值计算出来的“神奇数字”，对于其他浏览器/其他字体/为textarea设置的其他行高可能会有所不同。太棒了！谢谢你的帮助！仅在Chrome中进行了测试，但将高度设置为0，然后不添加任何内容似乎也能正常工作……同样在Chrome中，我注意到当按下enter键时，滚动条会在一瞬间显示出来，因此，一旦高度调整，文本会上下跳跃。在这里，我尝试通过在enter的On KeyDown高度中添加一个值来解决这个问题：–尽管这感觉有点糟糕，因为我添加的9是一个通过测试不同的值计算出来的“神奇数字”，对于其他浏览器/其他字体/为textarea设置的其他行高可能会有所不同。