如何在自动增长的文本区中设置scrollHeight？
在自动增长的文本区中设置scrollHeight可以通过以下步骤实现：
- 获取文本区的DOM元素：使用JavaScript的getElementById()或querySelector()方法获取文本区的DOM元素，并将其存储在一个变量中，例如：
var textarea = document.getElementById("myTextarea");- 监听文本区的输入事件：使用addEventListener()方法监听文本区的输入事件，以便在文本内容发生变化时触发相应的操作，例如：
textarea.addEventListener("input", function() {
// 在这里执行设置scrollHeight的操作
});- 设置scrollHeight属性：在输入事件的处理函数中，将文本区的scrollHeight属性设置为其内容的实际高度，以实现自动增长的效果，例如：
textarea.style.height = textarea.scrollHeight + "px";完整的代码示例如下：
<!DOCTYPE html>
<html>
<head>
<style>
#myTextarea {
height: auto;
overflow: hidden;
}
</style>
</head>
<body>
<textarea id="myTextarea"></textarea>
<script>
var textarea = document.getElementById("myTextarea");
textarea.addEventListener("input", function() {
textarea.style.height = textarea.scrollHeight + "px";
});
</script>
</body>
</html>这样，当用户在文本区输入内容时，文本区的高度会根据内容的实际高度自动调整，并出现滚动条以便查看全部内容。这种技术常用于实现自适应的文本输入框或评论框等场景。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：提供可扩展的云服务器实例，适用于各种计算场景。详情请参考：https://cloud.tencent.com/product/cvm
- 腾讯云云数据库MySQL版：提供高性能、可扩展的MySQL数据库服务，适用于各种应用场景。详情请参考：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云对象存储（COS）：提供安全可靠、高扩展性的云端存储服务，适用于存储和处理各种类型的数据。详情请参考：https://cloud.tencent.com/product/cos
相关·内容
我正在构建一个待办事项列表，并有两个文本区。第一个文本区域是用户添加待办事项的地方。它可以工作，并在事件输入时自动增长。第二个文本区是显示待办事项的地方，但显示不正确。在编辑输入事件中，文本是完全显示的，但由于某些原因，在事件模糊时(当用户单击页面时)文本不会完全显示。应该像第一个文本区域一样显示。Here就是这个问题的一个直观例子。完整的codepen here 注意:我尝试为两
浏览 47提问于2021-07-26得票数 1
回答已采纳
我正在实现一个自动文本区域大小调整器，当用户按下最小的scrollHeight大小时，它会自动扩展一个文本区域。
它在IE、Firefox和Opera中工作得很好，但在Chrome中却不行。在Chrome中，文本区域在任何按键下都会调整大小(不仅仅是输入)，因为当设置e.style.height时，textarea也会更改scrollHeight (在其他浏览器上不会发生这种情况)
浏览 2提问于2011-12-01得票数 0
我知道有很多关于这方面的讨论，但我还没有找到一个解决方案来解决我的需求。基本上，我需要自动增长一个文本区，而不是当你输入，而是加载。我从数据库中拉入内容，并根据用户的设置在文本区域上生成一个覆盖图，但这样做后，文本区域将无法滚动，因此我需要自动调整这些区域的大小以显示所有文本。我尝试过scrollHeight，但效果不是很好，因为屏幕上有多个文本框
谢谢
浏览 0提问于2012-10-26得票数 57
回答已采纳
我试图在现有content.When的基础上使textarea自动增长-- textarea的内容太长，textarea不是自动增长，无法以颜色显示整个内容，我应该输入'\n‘，文本区域将显示整个内容。但是在firefox中，textarea可以显示整个内容。HTML代码：
<textarea id="currentValue" class="auto-size" cols="110&q
浏览 3提问于2014-11-05得票数 0
我有点被看似简单但却不起作用的事情所困扰。 我想在一个模式中创建一个自动调整大小的文本区域。根据激活模式的元素，在模式显示上添加文本区域的值。在模式外观中，文本区域不会调整大小，并且控制台将0报告为scrollHeight。 如果我点击文本区域，它会被调整大小。如果我在文本区中输入或删除文本，它的大小会被调整。我不明白为什么在以
浏览 68提问于2020-04-29得票数 0
回答已采纳
2回答
调整输入文本区域的大小
、、、
我想创建一个自动增长的textarea，所以我使用了指南。它工作得很好，但有一个小问题。当您插入大文本并删除它们时，textarea的大小比它应该的要大。若要重新创建scrollHeight，请将'a \n b \n c \n d \n‘插入到textarea.Now删除所有内容中。文本区域保持了比现在更大的大小。对于每个插入的字符，textarea将将其大小调整到正确的值。
$(&qu
浏览 0提问于2019-09-16得票数 4
回答已采纳
我正在努力寻找最好的文本区自动增长插件。我需要一个可以调整文本区域大小的工具，即使我粘贴到文本区域中。有什么想法吗？
浏览 0提问于2011-02-19得票数 8
回答已采纳
1回答
在0.5版中，这很简单： <template>hidden_text.value = text.value + "\n";
浏览 3提问于2015-07-23得票数 7
回答已采纳
2回答
我有一个JS文本区域自动增长，并且文本区域大于1。在示例中，文本区域的ID为1,2,3,4...text/javascript"> $("#ctextarea").autoGrow();</script>现在我怎
浏览 1提问于2012-11-09得票数 1
回答已采纳
9回答
离子自动生成文本框
、、、
我试图在我的应用程序中添加一个自动增长的文本区域，但由于某种原因，它不起作用。我使用的模块是 (它是在离子论坛上推荐的)
浏览 0提问于2014-06-29得票数 7
回答已采纳
我想在我的项目中使用这个，但是我希望文本区域在加载内容时展开。function(){ if(($element[0].scrollHeight$element[0].style.height = 'auto';
newHeight = $element[0].scrollHeight$scope.offs
浏览 7提问于2016-07-18得票数 2
在自动扩展的textareas上有很多线程。我还没有找到一个我可以称之为“完美”的。我需要的一件事是我似乎不能修复，一旦用户开始输入，它们就会开始增长。我一直在试着自己解决这个问题，但没有成功。我不希望文本区在到达行尾或按enter键之前展开。
更新答案：
就我的情况而言，我不仅希望文本区只在到达下一行/回车时扩展。而且在没有文本的情况下也会收缩。一个快速的解决方案，除了提供的答
浏览 3提问于2012-05-24得票数 3
回答已采纳
18回答
我有一个用户可以输入文本的Textarea。默认情况下，其高度为17px。但是，如果用户插入大量文本，我希望文本区域相应地扩展。有没有办法用CSS做到这一点？提前感谢！！
浏览 9提问于2011-02-10得票数 43
回答已采纳
4回答
目前，我有以下代码用于自动调整文本区域的大小： $(this).height(50).height(Math.min(370, this.scrollHeight));当我在文本区域中并通过按下一些键来更改文本时，这个方法工作得很好。我需要的是一种可能性，以做同样的事情时，由JavaScript
浏览 0提问于2015-11-17得票数 0
如何在同一个页面中使用文本区域自动展开和jquery。我试图在同一个页面上使用类似这样的文本区域： <textarea name="text" id="textid"></textarea>form action="#" method="#">
<texta
浏览 1提问于2017-06-03得票数 0
回答已采纳
9回答
面积调整
、、
我需要使用文本区域来显示一些文本。问题是，如果我放置4-5行文本，就会出现滚动条。如何使用CSS/HTML使文本区域与其内容一样大(没有滚动条)。textarea不需要动态地更改其大小，我只使用它来显示文本(我也可以使用禁用的textarea)
我使用textarea显示数据库中的一些文本，所以当创建textarea (其中包含文本)时，它应该同时显示整个文本，没有滚动条。
浏览 5提问于2011-04-02得票数 10
回答已采纳
3回答
我一直在编写这段代码，以便在10秒的定时器上获得地理位置，结果将显示在文本区域。问题是如何在不替换旧结果的情况下追加新结果，并在必要时自动展开textarea。
<!
浏览 3提问于2015-05-09得票数 1
回答已采纳
所以我在线框中得到了一个网络鼓掌，但我遇到了一个问题，需要一个技术解决方案才能巩固这个模型，那就是：这是对预期功能的粗略概述(目前，我还不确定如何有一个具有最大宽度的div的文本字段)，
浏览 0提问于2010-11-19得票数 9
回答已采纳
我需要一个跨浏览器兼容的插件，当内部文本被写入或删除时，textrea可以自动增长和缩小。
我已经尝试过插件和Padolsey 插件。在Firefox 3.6中，这两个都失败了。
浏览 3提问于2012-03-20得票数 1
回答已采纳
1回答
什么是实现连接到键盘的不断增长的文本区域的好方法，比如facebook-app？如何在故事板中设置约束？因为这应该连接到不在故事板中的键盘？
浏览 1提问于2015-10-08得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
