如何用原生JS实现Bootstrap5页面中两个textarea高度实时同步匹配

开发者阿泽

2026-10-3

完全可以通过原生JS实现，不需要额外引入jQuery或其他JS框架，仅靠原生API即可完成两个textarea的高度同步需求。

实现思路

通过原生ResizeObserver接口监听两个textarea的尺寸变化，任意一个元素高度发生改变（包含用户拖拽调整、输入内容撑开高度两种场景）时，自动将高度同步到另一个元素即可。该API兼容所有现代主流浏览器，适配Bootstrap 5的样式规则无需额外修改。

实现代码

直接将以下代码插入到页面中（建议放在DOM元素加载完成后执行，比如放到</body>标签之前即可）：

// 获取两个textarea元素
const editTextarea = document.getElementById('note_content');
const previewTextarea = document.getElementById('note_content_preview');

// 高度同步方法
function syncHeight(source, target) {
  target.style.height = `${source.offsetHeight}px`;
}

// 注册尺寸变化监听器
const heightObserver = new ResizeObserver((entries) => {
  entries.forEach(entry => {
    const changedEl = entry.target;
    const targetEl = changedEl === editTextarea ? previewTextarea : editTextarea;
    syncHeight(changedEl, targetEl);
  });
});

// 给两个textarea都绑定监听
heightObserver.observe(editTextarea);
heightObserver.observe(previewTextarea);

// 初始加载时同步一次高度，避免初始样式差异
syncHeight(editTextarea, previewTextarea);