如何将表单输入框设置为只读状态_READONLY属性在INPUT中应用-html教程-PHP中文网

直接在标签写readonly属性即可生效，它是布尔属性，无需赋值；readonly="true"不规范，readonly="false"反而启用只读；与disabled区别在于readonly可聚焦、可选中、值会提交，而disabled不可交互且不提交。

如何将表单输入框设置为只读状态_readonly属性在input中应用

input 的 `readonly` 属性怎么写才生效

直接在 <input> 标签里加 readonly 属性即可，它是个布尔属性，不需要赋值。写成 readonly="true" 或 readonly="readonly" 虽然浏览器通常也认，但不符合 HTML 规范，可能在某些严格校验场景报错。

常见错误是误写成 readonly="false" —— 这样反而会启用只读（因为只要属性存在就生效），或者和 disabled 混用导致表单提交行为异常。

<input type="text" value="已填内容" readonly> ✅ 正确写法
<input type="text" readonly> ⚠️ 不推荐，冗余且非标准
<input type="text" readonly> ❌ 错误：只要写了 readonly 就只读，值真假无关

readonly 和 disabled 的关键区别在哪

两者都让输入框不可编辑，但语义和行为完全不同：readonly 元素仍可聚焦、可被选中、其值会随表单一起提交；disabled 则完全脱离交互流，无法聚焦，也不会出现在 FormData 或序列化结果中。

典型误用场景：用 disabled 显示用户 ID 后，后端收不到该字段 —— 其实该用 readonly。

anything-to-html

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

下载

需要保留值参与提交？→ 用 readonly
需要彻底禁用并视觉弱化？→ 用 disabled
想阻止聚焦但保留提交？→ readonly + tabindex="-1"

JavaScript 动态控制 readonly 状态的正确方式

不能用 .setAttribute('readonly', 'readonly') 或 .removeAttribute('readonly') 来切换 —— 这种操作在部分浏览器（尤其是旧版 Safari）上不稳定。应该直接操作 DOM 属性 .readOnly（注意大小写）。

示例：document.getElementById('myInput').readOnly = true; 或 false。这个属性是可写的，且实时生效。

设置只读：inputEl.readOnly = true;
取消只读：inputEl.readOnly = false;
检查状态：if (inputEl.readOnly) { ... }，不是 inputEl.hasAttribute('readonly')

readonly 在不同 input 类型中的兼容性表现

readonly 对 type="text"、"email"、"number"、"search" 等文本类输入有效；但对 type="checkbox"、"radio"、"file" 无效（这些类型不支持该属性，设了也没反应）。type="date" 和 "datetime-local" 在多数现代浏览器中支持 readonly，但 iOS Safari 会忽略 —— 如果需兼容，得配合 JS 阻止点击或弹出日历。