如何实现编辑状态下textarea与原展示div高度保持一致

解决方法 #

要实现textarea高度和原文本高度完全匹配，可按以下两种方案处理：

方案1：CSS原生实现（推荐，兼容性覆盖90%+主流浏览器）

核心用CSS新增的field-sizing: content属性，让textarea自动根据内容适配高度，同时统一文本样式消除高度差：

/* 统一原有p标签和textarea的文本、盒模型属性，避免样式差异导致的高度差 */
.flex-3 p, .text-block textarea {
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  box-sizing: border-box;
}

.text-block textarea {
  resize: none;
  /* 自适应内容高度 */
  field-sizing: content;
  /* 隐藏多余滚动条 */
  overflow: hidden;
  /* 移除默认边框轮廓避免撑开高度 */
  border: none;
  outline: none;
}

方案2：JS兼容实现（适配所有旧浏览器）

切换到编辑态时，通过JS动态计算内容高度赋值给textarea：

// 点击编辑按钮切换状态时执行以下代码
const textarea = document.querySelector('.text-block textarea')
const originTextP = document.querySelector('.flex-3 p')
// 先给textarea赋值文本内容
textarea.value = originTextP.textContent.trim()
// 先重置高度，再取内容滚动高度赋值，保证高度计算准确
textarea.style.height = 'auto'
textarea.style.height = `${textarea.scrollHeight}px`

内容的提问来源于stack exchange，提问作者Dave