HTML中input标签readonly只读属性的设置教程-html教程-PHP中文网

html中readonly是布尔属性，只需写readonly不赋值；与disabled区别在于readonly可聚焦、复制、提交value，disabled则完全禁用；js中应使用readonly驼峰属性操作。

html中input标签readonly只读属性的设置教程

直接写 readonly 属性就行，别赋值、别加引号、别写 readonly="false" —— 否则反而生效。

HTML 里怎么写 `readonly` 才算对

它是个布尔属性，浏览器只看存在与否，不关心值：

✅ 正确：<input type="text" value="订单号123" readonly>
✅ 正确：<textarea readonly>系统生成说明</textarea>
❌ 错误：<input readonly>（冗余，非标准）
❌ 错误：<input readonly>（只要写了就只读，false 不起否定作用）
❌ 错误：<input type="checkbox" readonly>（checkbox、radio、file 不支持该属性）

`readonly` 和 `disabled` 到底差在哪

选错会导致后端收不到字段、用户无法复制、Tab 键跳过异常等实际问题：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

readonly：能聚焦、能选中、能复制、value 会随表单提交（比如用户 ID、预填邮箱）
disabled：不能聚焦、不能复制、value 不参与任何序列化（FormData、form.submit()、serialize() 都不包含）
两者共存时，disabled 优先级更高，readonly 被忽略
视觉上：disabled 默认灰阶 + cursor: not-allowed；readonly 默认无变化，需手动加 CSS

JavaScript 动态控制 `readOnly` 的正确姿势

注意大小写：JS 属性名是 readOnly（驼峰），不是 readonly（全小写）：

✅ 正确：inputEl.readOnly = true 或 inputEl.readOnly = false
✅ 可用：inputEl.setAttribute('readonly', 'readonly') 或 inputEl.removeAttribute('readonly')
❌ 错误：inputEl.readonly = true（小写在部分浏览器不生效）
❌ 错误：inputEl.setAttribute('readonly', 'false')（依然只读）
检查状态必须用：if (inputEl.readOnly)，而不是 hasAttribute('readonly')（可能滞后）

容易被忽略的样式、可访问性和安全边界

readonly 是纯交互层限制，不防 JS 修改，也不自带提示：

CSS 建议补：input:read-only { background-color: #f5f5f5; cursor: not-allowed; }，避免仅靠颜色（色觉障碍用户不可见）
屏幕阅读器需要显式声明：aria-readonly="true"
React 中必须写 readOnly={true}（驼峰 + 布尔值），Vue 模板中写 readonly 可行，但 v-bind:readonly="isReadonly" 更稳妥
readonly 不等于“不可篡改”——JS 仍可改 value 并触发 input 事件，后端必须校验