blur事件在元素失去焦点时触发，常用于表单验证；focus事件在获得焦点时触发，配合:focus伪类可实现聚焦高亮；二者均不冒泡，需用focusin/focusout替代事件代理。
日期输入框（<input type="date">）本身不支持传统意义上的“失去焦点时高亮”，因为高亮是聚焦态（:focus）的视觉反馈，而 blur 是焦点离开的状态——你真正需要的，是「聚焦时高亮」+「失焦后保留某种视觉提示」，或「在失焦时触发校验并高亮错误」。浏览器原生 type="date" 不允许 CSS 伪类直接作用于内部年月日控件，但可通过包裹容器 + 状态监听实现可控高亮。
用 :focus 和容器 class 模拟“失焦高亮”效果
原生 <input type="date"> 在失焦时无法自动加边框或阴影，但你可以用 JS 监听 blur 事件，手动给父容器添加 class，再用 CSS 控制样式。这比强行 hack input 内部更稳定、可维护。
- 给
<input>包一层<div class="date-wrapper"> <li>监听 <code>input.blur，根据校验结果添加has-error或has-value类 - CSS 中写
.date-wrapper.has-error input或.date-wrapper.has-value::after来强化视觉 - 避免直接对
input[type="date"]:focus做复杂动画——部分 Safari/旧 Edge 会忽略box-shadow或渲染错位 - 监听
input.addEventListener('blur', () => { if (!input.checkValidity()) { input.parentElement.classList.add('error'); } }) -
input.validity.badInput表示用户输入了非 ISO 格式内容（比如手输 "Jan 1"） -
input.validity.rangeOverflow或rangeUnderflow在设置了min/max时才有意义 - 不要只依赖
value === ""判断空值——某些浏览器在非法日期下仍返回空串，但checkValidity()更可靠 - 全局 CSS 重置里有
outline: none且没补替代样式——必须显式定义border-color或box-shadow - 使用了
tabindex="-1"却没配focus()调用，导致该元素根本无法获得焦点（尤其动态插入的日期框） - 移动端 WebView（如微信内置浏览器）对
type="date"的 focus 样式支持极弱，:focus伪类可能完全不触发 - Chrome 125+ 开始限制
input[type="date"]的部分伪元素暴露，::-webkit-inner-spin-button等已不可样式化
onblur 触发后如何判断日期是否有效并高亮
用户离开日期输入框时，value 可能为空字符串（""）或非法格式（如 "2023-02-30"），此时应主动标记错误。注意：浏览器不会在 blur 时自动触发 validity.valid 校验，需显式调用 checkValidity()。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
为什么直接写 input[type="date"]:focus 有时不生效
不是你的 CSS 写错了，而是三个常见干扰项在起作用：
立即学习“前端免费学习笔记（深入）”；
真正难处理的是跨浏览器一致性：iOS Safari 对 :focus 的响应延迟明显，而 Android Chrome 又可能在软键盘收起后不触发 blur。如果你需要强反馈，别只靠 CSS，得用 JS 主动控制 class + aria-invalid + 实时校验逻辑。否则所谓“高亮”，很可能只在桌面 Chrome 里看起来正常。
