如何用HTML代码实现带有格式占位符的只读文本显示框-html教程-PHP中文网

textarea实现只读且保留换行缩进需三要素：readonly属性、wrap="off"、white-space:pre+monospace字体，缺一不可；否则空格压缩、长行折行或格式丢失。

如何用html代码实现带有格式占位符的只读文本显示框

用 `<textarea></textarea>` 实现只读但保留换行缩进的文本显示

直接用 <textarea></textarea> 是最稳妥的选择——它原生支持换行、空格、制表符等格式占位符，且设为 readonly 后用户无法编辑，又比 <pre class="brush:php;toolbar:false;"></pre> 更容易控制宽高和字体一致性。

常见错误是只加 readonly 却忽略 wrap="off" 和 CSS 重置，导致长行自动折行、空格被压缩。实际使用时需同时处理三处：

readonly 属性必须显式写上（仅 disabled 会变灰且提交时丢值）
加上 wrap="off" 防止浏览器对长文本自动换行（尤其 Chrome/Firefox 默认 wrap="soft"）
CSS 中设置 white-space: pre; font-family: monospace; 确保空格、制表符不被合并，等宽字体对齐更准

示例：

<textarea readonly wrap="off" style="white-space: pre; font-family: monospace; width: 100%; height: 120px; border: 1px solid #ccc; padding: 8px;">Name:    Alice
Age:     32
City:    New York</textarea>

为什么不用 `<pre class="brush:php;toolbar:false;"></pre>` + `<code>`？

<pre class="brush:php;toolbar:false;"></pre> 确实保留空白符，但它是块级元素，无法像表单控件那样统一设置尺寸、边框或聚焦样式；更关键的是，它不支持 readonly 语义，用户仍可全选复制，但无法通过键盘导航到其中（比如 Tab 键跳过），在表单流中体验割裂。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

如果硬要用 <pre class="brush:php;toolbar:false;"></pre>，必须额外加 tabindex="-1" 阻止焦点进入，并用 CSS 模拟禁用态（如 opacity: 0.7;），但这样无法阻止右键“全选”或双击选词——而 <textarea readonly></textarea> 浏览器原生屏蔽所有编辑行为，包括拖拽选中后粘贴覆盖。

`contenteditable="false"` 在 `<div> 上可行吗？ <p>技术上可以，但不推荐。虽然 <code><div contenteditable="false"> 能显示格式化文本，但它：不参与表单序列化（<code>form.submit()` 不包含其内容）、无障碍支持差（屏幕阅读器可能忽略其只读状态）、移动端光标行为不稳定（iOS Safari 偶尔仍唤出键盘）。更重要的是，`contenteditable` 的 false 值并非标准属性，部分老浏览器会直接忽略，退化为可编辑状态。
若必须用 div（例如嵌入富文本预览），至少补上：`aria-readonly="true"`、`tabindex="-1"`、`user-select: none;`，并手动监听 `keydown` 阻止 `Backspace`/`Delete`。

格式占位符失效的典型场景与修复

最常踩的坑是后端返回的文本含 \r\n 换行符，但前端直接插入 <textarea></textarea> 时被浏览器转义成普通空格；或者用了 innerText 赋值（会压缩空白），而非 textContent 或直接 innerHTML。

服务端返回 JSON 字段时，确保换行符未被 JSON 库二次转义（如 Python json.dumps() 默认不转义 \n，但某些配置会加反斜杠）
JS 赋值时用 el.textContent = str;，别用 el.innerText = str;（后者会按渲染规则折叠空白）
若文本来自用户输入再回显，注意 HTML 实体编码：原始字符串中的不会被 <textarea></textarea> 解析为空格，应保持纯文本传入

复杂点在于混合了 Markdown 或 ANSI 转义色码的文本——这时 <textarea></textarea> 只能显示原始字符，无法渲染颜色或样式，得换方案（如用 <pre class="brush:php;toolbar:false;"></pre> + highlight.js），但那就超出“只读+格式占位符”的基本需求了。