readonly 属性使输入框可聚焦、可选中文本、提交时保留值，而 disabled 则彻底禁用交互且不提交值；二者语义、事件响应、样式控制及无障碍支持均不同，必须按需选用。
用 readonly 属性让输入框可聚焦但不许修改
如果只是临时禁用输入，又希望用户能选中文本、触发 focus 事件或提交表单时仍带上值，readonly 是最常用也最安全的选择。
-
<input type="text" value="已填内容" readonly>—— 浏览器会灰化显示（样式可覆盖），光标能进入，但无法输入或删除 - 对
<textarea>同样有效：<textarea readonly>只读文本</textarea> - 注意：不要写成
readonly="false"或readonly="disabled"，它是个布尔属性，存在即生效，写readonly就够了 - JS 动态控制：用
inputElement.readOnly = true（注意是readOnly，大小写敏感）
用 disabled 属性彻底禁用输入框
如果连聚焦、选中、提交都不需要，disabled 更彻底——它会让元素不可交互，且表单提交时自动忽略该字段的值。
-
<input type="text" value="被禁用" disabled>—— 默认变灰 + 失去焦点能力，键盘鼠标均无效 -
<select disabled><option>选项</option></select>和<button disabled>行为一致 - 关键区别：被
disabled的元素不会出现在form.elements中，也不会随form.submit()发送到后端 - JS 控制：用
inputElement.disabled = true（小写d）
别混淆 readonly 和 disabled 的语义与行为
两者视觉上可能相似，但底层逻辑完全不同，选错会导致表单逻辑出错或交互异常。
- 值是否提交：
readonly的值会提交；disabled的不会 - 是否响应事件：
readonly元素仍触发focus、click；disabled元素基本不触发任何事件（除极少数如mouseenter） - 样式继承：
disabled元素的color、opacity等常被浏览器强制覆盖，而readonly完全受 CSS 控制 - 无障碍支持：
disabled元素会被屏幕阅读器跳过；readonly仍会被朗读，更友好
用 CSS 配合避免“伪只读”陷阱
仅靠 pointer-events: none 或 user-select: none 不算真正禁用——它们拦不住键盘输入、不改变表单行为、也不影响可访问性。
立即学习“前端免费学习笔记（深入）”；
- 错误做法：
<input style="pointer-events:none;">—— 用户仍可用 Tab 切入并敲键盘输入 - 正确思路：CSS 只做辅助，核心必须用
readonly或disabled - 若需统一视觉风格，建议给
[readonly]和:disabled分别写 CSS，比如：input[readonly] { background: #f5f5f5; cursor: default; }<br>input:disabled { opacity: 0.6; }
