readonly 本质是允许聚焦、选中、复制但禁止用户编辑，仍参与表单提交；disabled 则完全禁用交互且不提交。二者 css 伪类、js 属性（readonly vs disabled）、行为差异必须严格区分。

readonly 属性不是“让 input 看起来不能编辑”那么简单，它本质是告诉浏览器：这个字段可聚焦、可选中、可复制，但用户不能修改值——和 disabled 有根本区别。用错就可能提交失败、样式异常或键盘操作意外中断。

readonly 和 disabled 的行为差异必须分清

很多人以为加了 readonly 就等于禁用，结果表单提交时发现字段没传过去，或者样式死活调不对。

• readonly：元素仍参与表单提交，能获取焦点（tabindex 有效），文字可全选/复制，CSS 里 :read-only 可匹配
• disabled：不提交、无法聚焦、不可复制，CSS 用 :disabled 匹配，且默认变灰（opacity 或 color 常被重置）
• JS 中判断：input.readOnly 是布尔值（注意大小写），而 input.disabled 是另一属性，别混用

只读 input 在 JS 中的赋值与监听要点

加了 readonly 不代表 JS 不能改值——它只是阻止用户输入，脚本依然可以操作 value 或 setAttribute。

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

• 推荐用 input.value = 'xxx' 修改，而非 input.setAttribute('value', 'xxx')，后者只影响初始值，对已渲染的 input 无效
• input 元素加了 readonly 后，input.addEventListener('input', ...) 依然会触发（只要值被 JS 改了），但用户敲键盘不会触发
• 如果想“彻底锁死”，需配合 onkeydown="return false" 或监听 keydown 并 preventDefault()，但通常没必要——readonly 已足够

常见错误场景与修复方式

以下问题高频出现，且往往和框架或 CSS 交互有关：

• 加了 readonly 但鼠标双击仍可编辑？检查是否被 JS 动态移除了该属性，或用了 contenteditable="true" 冲突
• Vue/React 中绑定 v-model 或 value 后 readonly 失效？确保不是用 disabled 混淆了，且在受控组件中，只读逻辑应由状态驱动（如 :readonly="isReadonly"）
• CSS 样式没反应？确认用了 input:read-only { background: #eee; }，而不是误写成 input[readonly]（后者虽可用，但语义不如伪类准确）
• 移动端 iOS Safari 中 readonly input 无法唤起键盘但光标乱跳？加 inputmode="none" 显式关闭输入法，避免系统猜测行为

最易被忽略的是表单提交时的兼容性：某些老后端框架（如早期 Django 表单）会忽略 readonly 字段的校验，但前端 JS 提交时若没手动收集该字段，就真丢了。别假设“页面上显示着，后端就一定能收到”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！