HTML中input标签实现动态切换readonly属性的教程-html教程-PHP中文网

应直接使用 element.readOnly = true 或 false 设置只读状态，因 readonly 是布尔属性，旧版 Safari 中 setAttribute('readonly', 'readonly') 无法同步 DOM 属性，导致输入框仍可编辑。

html中input标签实现动态切换readonly属性的教程

直接用 element.readOnly = true 或 false，别碰 setAttribute 和 removeAttribute —— 后者在 Safari 15 及更早版本里会失效。

为什么不能用 `setAttribute('readonly', 'readonly')`

这个写法看似符合 HTML 属性习惯，但实际在部分旧版 Safari 中无法正确触发只读状态切换，表现为：JS 执行了、DOM 属性也改了，但输入框仍可编辑。根本原因是 readonly 是布尔属性，浏览器内部依赖的是 DOM 属性 readOnly（驼峰）的布尔值，而非 attribute 的存在与否。用 setAttribute 修改的是 HTML attribute，不保证同步更新底层 DOM 属性。

✅ 正确写法：inputEl.readOnly = true（设为只读）或 inputEl.readOnly = false（解除只读）
⚠️ 不推荐：inputEl.setAttribute('readonly', 'readonly') 或 inputEl.removeAttribute('readonly')
❌ 错误写法：inputEl.readonly = true（小写 readonly 是无效属性名，Safari 不认）

如何确保页面加载时状态就准确

很多 bug 出现在“复选框默认未勾选，但 input 没初始化为 readonly”。事件监听器（如 change）只响应用户操作，不会自动执行一次初始化逻辑。

把状态同步逻辑抽成函数，比如 syncReadOnly()
在 DOMContentLoaded 里调用它，确保首次渲染即生效
再给复选框绑定 change 事件，复用同一函数
避免 HTML 里硬写 readonly="true" —— 非标准写法，readonly 是布尔属性，有就生效，值无关

切换时容易忽略的焦点和无障碍问题

从可编辑切到 readOnly = true 后，如果用户正聚焦在这个 input 上，它依然保持焦点，但键盘输入被拦截。这会导致 Tab 导航“卡住”——按 Tab 时它不会跳走，因为不是 disabled，但用户又输不了，体验断层。

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

建议在设为只读前主动调用 inputEl.blur()，清掉残留焦点
若需保留视觉聚焦态（比如高亮边框），用 CSS 类 + :focus-within 控制，别依赖原生 focus 状态
屏幕阅读器对 readOnly 的播报是“只读”，对 disabled 是“已禁用”，语义不同，别混用
检查状态必须用 inputEl.readOnly，而不是 inputEl.hasAttribute('readonly') —— 后者可能滞后或不准

哪些 input 类型不支持 readonly

readonly 只对文本类控件生效，其他类型加了也白加，浏览器直接忽略。

✅ 支持：text、email、number、date、datetime-local、search、url、tel、password、textarea
❌ 不支持：checkbox、radio、file、hidden、select、button
⚠️ 特别注意：date 在 iOS Safari 中常忽略 readonly，得额外监听 click 并 e.preventDefault() 阻止日历弹出