HTML的readonly只读文本怎么设-html教程-PHP中文网

html中让input或textarea只读，最简单方式是添加readonly布尔属性，不带等号和值；javascript中应操作readonly属性而非setattribute；需用css和aria增强可访问性。

html的readonly只读文本怎么设

直接写 `readonly` 属性就行，别赋值

HTML 中让 <input> 或 <textarea></textarea> 变只读，最简单的方式就是在标签里加 readonly 这个布尔属性，不带等号、不写值：
✅ 正确：<input type="text" value="订单号123" readonly>
✅ 正确：<textarea readonly>系统生成说明</textarea>
❌ 错误：readonly="true" 或 readonly="false" —— 浏览器只看属性是否存在，写了就生效，值是什么无关紧要；readonly="false" 反而会让它变成只读。

`readOnly` 和 `disabled` 别混，提交行为差很远

很多人设了 readonly 却发现后端收不到值，其实是误用了 disabled。
关键区别在表单提交和交互能力：

readonly：内容不能输，但能 聚焦、选中、复制，且它的 name 和 value 会随表单一起提交
disabled：完全失活，不能聚焦、不能复制，且该字段 不会出现在 FormData 或序列化结果中
如果只是“展示+需提交”，比如用户 ID、预填邮箱、时间戳，必须用 readonly
如果想彻底禁用（比如权限不足时隐藏输入框），才用 disabled

JavaScript 动态控制要用 `readOnly`（注意大小写）

用 JS 切换只读状态时，别调 setAttribute('readonly', ...)，兼容性差且不可靠。应该直接操作 DOM 属性：
✅ 正确：inputEl.readOnly = true 或 inputEl.readOnly = false
⚠️ 注意：readOnly 是 JS 属性名（驼峰），而 HTML 里是 readonly（全小写）
❌ 错误：inputEl.setAttribute('readonly', 'true') 或 inputEl.readonly = true（小写 readonly 在某些浏览器不生效）
检查当前状态也得用：if (inputEl.readOnly)，而不是 inputEl.hasAttribute('readonly')，因为后者可能滞后或不准。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

样式和可访问性得手动补，浏览器默认不提示

原生 readonly 没视觉反馈，用户点进去才发现不能改——体验很差。
推荐加一点 CSS 区分：

用 :read-only 伪类精准命中：input:read-only, textarea:read-only { background-color: #f9f9f9; cursor: default; }
别只靠颜色（色觉障碍用户看不到），加 cursor: default 或 cursor: not-allowed 更直观
对屏幕阅读器友好：显式加 aria-readonly="true"
React/Vue 中注意写法：readOnly={true}（React 要驼峰），模板里写 readonly 可能被框架忽略