iOS Safari中input type="date"的readonly属性失效，用户仍可点击唤起日历；正确做法是HTML设readonly，再用JavaScript监听click/focus事件并preventDefault()和blur()，同时设置tabindex="-1"防止键盘聚焦。
type="date" 的 readonly 属性在 iOS Safari 上会失效
多数现代浏览器（Chrome、Firefox、Edge）支持 readonly 用于 <input type="date">，但 iOS Safari（截至 2026 年）会完全忽略它——用户仍能点击唤起日历并更改日期。这不是 bug，而是规范实现差异。别只靠 HTML 属性就认为“安全”。
正确做法是：用 readonly + JavaScript 拦截交互。
- HTML 中保留
readonly，提供语义和基础防护：<input type="date" id="birthDate" readonly> - 监听
click和focus，立即e.preventDefault()并blur() - 额外加
tabindex="-1"防止键盘聚焦（否则 Tab 键仍可聚焦到该控件）
disabled 会让 date 输入框的值不提交，但 readonly 不会
如果表单提交时后端收不到 date 字段，第一反应不是 JS 出错，而是检查是否误用了 disabled。HTML 规范明确：带 disabled 属性的表单控件，其 name 和 value 不参与任何提交（包括 FormData、form.submit()、原生表单 POST）。
readonly 则不同：它允许聚焦（除非你手动 tabindex="-1"）、允许选中文本、且值照常提交。
立即学习“前端免费学习笔记（深入）”；
- 需要提交日期值？→ 必须用
readonly，不能用disabled - 只想视觉禁用、且该字段无业务意义？→ 可用
disabled，但得确认后端不依赖这个字段 - 混用
readonly和disabled？→ 浏览器以disabled为准，readonly被覆盖，值照样不提交
怎么用 JS 动态切换 date 输入框的只读状态
不能用 .setAttribute('readonly', '') 或 .removeAttribute('readonly') 来控制 —— 这在旧版 Safari 和部分 WebView 中不可靠。必须操作 DOM 属性 .readOnly（注意大小写）。
示例：
const dateInput = document.getElementById('birthDate');
// 设为只读
dateInput.readOnly = true;
// 取消只读
dateInput.readOnly = false;
// 检查状态（别用 hasAttribute）
if (dateInput.readOnly) { /* ... */ }
-
.readOnly是布尔属性，赋值true/false即可，无需字符串 - 设为
true后，仍需补上 click/focus 拦截，尤其在 iOS 上 - 不要同时设置
disabled=true，否则.readOnly失效
type="date" 不支持 readonly 的浏览器有哪些
目前仅 iOS Safari（所有版本，含 2026 年最新版）明确不支持 readonly 对 type="date" 的行为约束。Android Chrome、桌面 Safari、Firefox 均支持。这意味着：如果你的用户群含大量 iPhone 用户，纯 HTML 的 readonly 就是摆设。
更麻烦的是，iOS Safari 即使看到 readonly，也不会报错或警告，它只是静默忽略——你得真点进去试，才会发现日期还能改。
- 兼容方案只有两个：JS 拦截（推荐），或换用
type="text"+ 自定义日历组件（成本高） - 别依赖 CSS（如
pointer-events: none）—— 它破坏可访问性，屏幕阅读器可能跳过该控件，且无法阻止键盘Enter触发日历 - 若用框架（如 React/Vue/Angular），记得在生命周期中同步
.readOnly状态，而不是只更新 props
