Html 禁用的文本区域会丢失换行符

发布于11月18日

我有一个white-space: wrap;的文本区.

但是，当文本区域被禁用时，换行符将被忽略:

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

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

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

<textarea wrap="on">1asdfasdf

2afdasdfafdasdfafdasdfaw


3asdfasdf


4asdfasdf</textarea>

<br/>

<button>Toggle 'disabled'</button>

JSFiddle个

我希望textarea内容保持不变，无论是否禁用.它还包括textarea的scrollHeight.

有可能吗？

推荐答案

值wrap对于white-space css属性无效，可接受的值可以是下列值之一:

white-space: normal|nowrap|pre|pre-line|pre-wrap|initial|inherit;

要解决此问题，您可以使用white-space: pre-wrap;.

textarea:disabled {
  ...
  white-space: pre-wrap;
}

这将确保textarea的内容在行尾换行，并保留空格和换行符，即使在禁用textarea时也是如此.

最终版本应该是这样的:

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

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

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

<textarea wrap="on">1asdfasdf

2afdasdfafdasdfafdasdfaw


3asdfasdf


4asdfasdf</textarea>

<br/>

<button>Toggle 'disabled'</button>

`pre` vs `pre-wrap` vs `pre-line`

100
- Whitespace Preservation:所有的空格序列(如空格和制表符)都被精确地保留在HTML中.
- Line Breaks:只在HTML源文件中的换行符(\n)或<br>个元素处换行.当文本超出容器的宽度时，它不会自动换行到下一行.
- Use Case:通常用于显示代码或预先格式化的文本，其中格式化非常关键，并且应该完全按照在HTML中编写的方式显示.
100
- Whitespace Preservation:与pre类似，它保留所有空格序列.
- Line Breaks:行在换行符、<br>个元素处换行，并在到达容器(行框)的末尾时自动换行.
- 当您希望保留原始空格和换行符，但又需要文本在其容器中换行时，例如在某些文本编辑器或注释区中，Use Case:非常有用.
100
- Whitespace Collapse:与pre和pre-wrap不同，pre-line将空白序列折叠为单个空白.但是，它仍然保留了内容中的换行符.
- Line Breaks:行在换行符、<br>个元素处换行，文本在容器边缘换行.
- Use Case:如果您希望保持文本格式的整洁和整洁，同时尊重显式换行符，例如在某些类型的格式化内容显示中，这将非常有用.