javascript - 当其中一个更改时匹配两个 textarea 元素的大小

Question

我有一个带有两个 textarea 的小型 HTML 页面元素并排。一个启用输入，另一个是只读的，并且动态显示第一个的预览(用于某些自定义模板处理)。

我想要两个 textarea元素始终具有相同的高度，并且如果使用调整大小，则它们可以匹配另一个。尽管我使用的是 Bootstrap 5，但我没有使用 jQuery 或任何花哨的 JS 框架。
这可以用 Vanilla JS来完成吗？
这是我的两个 textarea 的代码年代:

<div class="row">
        <div class="col-6 mb-3 form-floating mt-3 ml-auto gx-1">
            <textarea class="form-control" id="note_content" style="height: 300px"></textarea>
            <label for="note_content" class="form-label">Note content template (you can use book parameters here!)</label>
        </div>
        <div class="col-6 mb-3 form-floating mt-3 ml-auto gx-1">
            <textarea class="form-control" id="note_content_preview" style="height: 300px" placeholder="preview" disabled></textarea>
            <label for="note_content_preview" class="form-label">Note content preview</label>
        </div>
    </div>

Answer 1

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

const note = document.getElementById("note_content");
const preview = document.getElementById("note_content_preview");

const resizeObserver = new ResizeObserver(() => {
 preview.style.height = note.offsetHeight + "px";
 preview.style.width = note.offsetWidth + "px";
});
resizeObserver.observe(note);

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="row">
  <div class="col-6 mb-3 form-floating mt-3 ml-auto gx-1">
    <textarea class="form-control" id="note_content" style="height: 300px"></textarea>
    <label for="note_content" class="form-label">Note content template (you can use book parameters here!)</label>
  </div>
  <div class="col-6 mb-3 form-floating mt-3 ml-auto gx-1">
    <textarea class="form-control" id="note_content_preview" style="height: 300px" placeholder="preview" disabled></textarea>
    <label for="note_content_preview" class="form-label">Note content preview</label>
  </div>
</div>