JavaScript-当两个textarea元素中的一个发生变化时匹配它们的大小-堆栈溢出

顺晟科技

2022-10-19 12:09:36

113

我有一个小的HTML页面，两个元素并排在一起。一个为输入启用，另一个为只读，并动态显示第一个的预览（用于某些自定义模板处理）。

我希望这两个元素始终具有相同的高度，并且如果使用调整大小，它们可以匹配另一个。我没有使用jQuery或任何花哨的JS框架，但我使用的是Bootstrap 5.

用香草JS可以做到这一点吗？

这是两个S的代码:

顺晟科技：

如果您只是想让textareas在调整大小时匹配，则不需要任何自定义JS或CSS。在您的标记中，使用flexbox（）使textareas的高度增加...

textarea

如果还希望第一个textarea调整其内容的大小，请使用输入处理程序。

textarea

您可以使用resize observer侦听主textarea元素的调整大小更改，然后根据第一个元素的高度/宽度调整第二个textarea元素的高度/宽度，方法是在调整大小时获取其高度/宽度:

网站建设