禁用状态下的textarea丢失换行符问题求解

我有一个设置了white-space: wrap;样式的textarea，然而当该textarea处于disabled状态时，换行符会被忽略。相关代码示例如下：

JavaScript 代码 #

const textarea = document.querySelector("textarea");

document.querySelector("button").addEventListener("click", (e) => {
  if (!textarea.hasAttribute("disabled")) {
    textarea.setAttribute("disabled", "disabled");
  } else {
    textarea.removeAttribute("disabled", "disabled");
  }
});

CSS 代码 #

textarea,
textarea:disabled {
  width: 600px;
  height: 100px;
  white-space: wrap;
}

HTML 代码 #

<textarea wrap="on">1asdfasdf

2afdasdfafdasdfafdasdfaw


3asdfasdf


4asdfasdf</textarea>

<br/>

<button>Toggle 'disabled'</button>

我希望无论textarea是否禁用，其内容显示（包括scrollHeight）都保持一致，请问是否可以实现？

可以实现，核心是规避浏览器对禁用状态textarea的特殊排版规则，以下是两种可行方案：

方案1：用readonly+样式模拟禁用状态 #

浏览器对readonly属性的textarea不会修改文本排版逻辑，我们可以通过CSS模拟禁用的视觉效果，既保留正常的换行和scrollHeight，又让用户感知控件不可编辑：

修改后的JavaScript #

const textarea = document.querySelector("textarea");
const btn = document.querySelector("button");

btn.addEventListener("click", (e) => {
  if (!textarea.hasAttribute("readonly")) {
    textarea.setAttribute("readonly", "readonly");
    textarea.classList.add("disabled-style");
  } else {
    textarea.removeAttribute("readonly");
    textarea.classList.remove("disabled-style");
  }
});

补充的CSS #

textarea.disabled-style {
  background-color: #eee;
  color: #999;
  cursor: not-allowed;
}

方案2：隐藏textarea同步计算scrollHeight（保留disabled属性） #

如果必须使用disabled属性，可以添加一个隐藏的非禁用textarea，同步内容和尺寸，用它的scrollHeight来控制可见textarea的高度：

修改后的HTML #

<textarea id="visible-textarea" wrap="on">1asdfasdf

2afdasdfafdasdfafdasdfaw


3asdfasdf


4asdfasdf</textarea>
<textarea id="hidden-textarea" wrap="on" style="position:absolute;top:-9999px;left:-9999px;opacity:0;"></textarea>

<br/>

<button>Toggle 'disabled'</button>

修改后的JavaScript #

const visibleTextarea = document.getElementById("visible-textarea");
const hiddenTextarea = document.getElementById("hidden-textarea");
const btn = document.querySelector("button");

// 初始化同步内容与尺寸
hiddenTextarea.value = visibleTextarea.value;
hiddenTextarea.style.width = visibleTextarea.offsetWidth + "px";
visibleTextarea.style.height = hiddenTextarea.scrollHeight + "px";

btn.addEventListener("click", (e) => {
  visibleTextarea.toggleAttribute("disabled");
  // 同步内容并更新高度
  hiddenTextarea.value = visibleTextarea.value;
  visibleTextarea.style.height = hiddenTextarea.scrollHeight + "px";
});

// 内容变化时同步（可选）
visibleTextarea.addEventListener("input", () => {
  hiddenTextarea.value = visibleTextarea.value;
  visibleTextarea.style.height = hiddenTextarea.scrollHeight + "px";
});

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