Textarea不会在从Javascript追加后使用预填充值自动增长高度

我正在研究Spring应用程序。我想将预先填充的值设置为textarea并将其显示给用户。我需要该文本区域显示多行，其中的高度根据内容

我尝试了一些来自互联网的脚本，但没有成功

为了理解我的目标，我创建了示例代码

函数提交（）{
$（“#文本”）.remove（）；
让数据=`asdaaaaa
阿斯达
阿萨德
助理
达斯德
dsasd
SDADS
asdasd`
$（“#条幅消息”）。追加（数据）；
}

正文{
背景：#20262E；
填充：20px；
字体系列：Helvetica；
}
#横幅信息{
背景：#fff；
边界半径：4px；
填充：20px；
字体大小：25px；
文本对齐：居中；
过渡：均为0.2s；
保证金：0自动；
宽度：300px；
}
钮扣{
背景：#0084ff；
边界：无；
边界半径：5px；
填充：8px 14px；
字体大小：15px；
颜色：#fff；
}
#banner-message.alt{
背景：#0084ff；
颜色：#fff；
边缘顶端：40px；
宽度：200px；
}
#banner-message.alt按钮{
背景：#fff；
颜色：#000；
}

点击我！

添加到Calvin Nunes的注释中，您可以尝试以下操作（在附加节点后）

函数提交（）{
$（“#文本”）.remove（）；
让数据=`asdaaaaa
阿斯达
阿萨德
助理
达斯德
dsasd
SDADS
asdasd`
$（“#条幅消息”）。追加（数据）；
//计算文本值中的行数
var numRows=（$（“#text”）.val（）.match（/\n/g）| |[]）.length+1；
$（“#text”）.attr（“行”，numRows）；
}

正文{
背景：#20262E；
填充：20px；
字体系列：Helvetica；
}
#横幅信息{
背景：#fff；
边界半径：4px；
填充：20px；
字体大小：25px；
文本对齐：居中；
过渡：均为0.2s；
保证金：0自动；
宽度：300px；
}
钮扣{
背景：#0084ff；
边界：无；
边界半径：5px；
填充：8px 14px；
字体大小：15px；
颜色：#fff；
}
#banner-message.alt{
背景：#0084ff；
颜色：#fff；
边缘顶端：40px；
宽度：200px；
}
#banner-message.alt按钮{
背景：#fff；
颜色：#000；
}

点击我！

您可以做的最好的事情是动态创建一个textarea，它更好，而且使用jquery更容易。检查换行符并为文本区域指定足够多的行

函数提交（）{
$（“#文本”）.remove（）；
让数据=`asdaaaaa
阿斯达
阿萨德
助理
达斯德
dsasd
SDADS
asdasd`
设textarea=$（document.createElement（“textarea”），//textarea的新元素
matches=data.match（/\n/g），//匹配数据中的换行符
breaks=matches？matches.length:2；//获取长度或返回2
val（数据）//将值附加到textarea
textarea.attr（'rows'，breaks+2）；//将属性分配给texarea
textarea.attr（'id'，'text”）；//将id分配给textarea
$（“#banner message”）.append（textarea）；//将textare追加到div
}

正文{
背景：#20262E；
填充：20px；
字体系列：Helvetica；
}
#横幅信息{
背景：#fff；
边界半径：4px；
填充：20px；
字体大小：25px；
文本对齐：居中；
过渡：均为0.2s；
保证金：0自动；
宽度：300px；
}
钮扣{
背景：#0084ff；
边界：无；
边界半径：5px；
填充：8px 14px；
字体大小：15px；
颜色：#fff；
}
#banner-message.alt{
背景：#0084ff；
颜色：#fff；
边缘顶端：40px；
宽度：200px；
}
#banner-message.alt按钮{
背景：#fff；
颜色：#000；
}

点击我！

为了解决这个问题，我设置了计时器，使用javascript重新加载内容

---

javascript加载的内容之所以不起作用，是因为html还没有加载，所以在加载html后使用计时器从javascript重新加载内容，效果会很好。您可以尝试将持续时间减少到您想要的低，并测试它是否有效

您不能简单地添加

rows='8'

而不是

rows='1'

？或者该值将始终是动态的？我尝试了您的解决方案，最终，rows属性似乎没有改变元素textarea的高度。我错过了吗something@laughing使用snippet更新了解决方案，您可以尝试运行snippet和testIs，还有其他选项吗？因为我在循环中附加了很多元素，还有样式类和动态id。这是循环中最好的选择。对此，您应该使用react.js