当通过 JavaScript 移除 hide 类使 <input type="date"> 可见后，其原生日历不会自动弹出；需显式调用 showPicker() 方法手动触发。
当通过 javascript 移除 `hide` 类使 `` 可见后，其原生日历不会自动弹出；需显式调用 `showpicker()` 方法手动触发。
在构建 Kanban 类应用时，常采用“点击编辑 → 显示隐藏的日期输入框 → 编辑后更新”这一交互流程。但一个常见误区是：仅通过 CSS 类控制 display 或 visibility（如移除 hide 类），并不能激活 <input type="date"> 的原生日期选择器——浏览器不会自动聚焦或打开日历面板，即使该元素已可见且可交互。
要解决此问题，关键在于主动调用 HTMLInputElement.showPicker() 方法。这是现代浏览器（Chrome 109+、Edge 109+、Firefox 113+ 支持，Safari 尚未支持）提供的标准 API，用于以编程方式触发原生日期/时间/颜色等输入控件的选择器界面。
✅ 正确做法：在显示 input 后立即调用 showPicker()
在你的 edit 事件处理逻辑中，修改如下（重点添加 .showPicker() 调用，并确保元素已渲染、可聚焦）：
if (event.target.classList.contains("edit")) {
const formInput = card.querySelector('input[name="task"]');
const dateInput = card.querySelector('input[name="date"]');
const dateDisplay = card.querySelector('span.date'); // 建议使用更精确的选择器
formInput.removeAttribute("disabled");
dateInput.classList.remove("hide");
dateInput.value = dateDisplay.textContent.trim();
// ? 关键修复：先确保元素已挂载并可交互，再调用 showPicker()
dateDisplay.classList.add("hide");
event.target.classList.add("hide");
event.target.nextElementSibling.classList.remove("hide");
// 确保 DOM 更新完成后再触发（使用 requestAnimationFrame 或 setTimeout）
requestAnimationFrame(() => {
if (typeof dateInput.showPicker === 'function') {
try {
dateInput.showPicker();
} catch (err) {
console.warn("showPicker() not supported or failed:", err);
// 可选降级：自动聚焦，提示用户手动点击
dateInput.focus();
}
} else {
console.warn("showPicker() is not available in this browser.");
dateInput.focus();
}
});
}⚠️ 注意事项与兼容性建议
- 浏览器兼容性：showPicker() 在 Safari 中暂不支持（截至 Safari 17.5）。生产环境应始终做特性检测（if (dateInput.showPicker)）并提供降级方案（如 focus() + 清晰 UI 提示）。
- 执行时机：必须在元素已从 display: none / visibility: hidden 状态完全恢复、且处于可聚焦状态后调用。推荐使用 requestAnimationFrame 或微任务（如 Promise.resolve().then(...)）确保 DOM 渲染完成。
- 无障碍与用户体验：调用 showPicker() 后，用户仍可通过键盘（如 Enter 或 Space）打开日历；保持 input 的 id 和 aria-label 属性有助于屏幕阅读器识别。
- 不要依赖 click() 模拟：对 date 输入框调用 dateInput.click() 无效，因其不响应程序化点击事件来触发日历。
? 总结
原生 <input type="date"> 的日历面板不会因 CSS 显示而自动弹出，这是设计使然，而非 Bug。正确解法是：
① 确保 input 元素已可见、启用且在 DOM 中；
② 使用 element.showPicker() 主动唤起；
③ 做好浏览器兼容性兜底（特性检测 + focus()）；
④ 配合 requestAnimationFrame 保证执行时机。
如此，你的 Kanban 应用编辑日期时将获得一致、符合平台规范的原生体验。
立即学习“Java免费学习笔记（深入）”；
