document.title需与isdirty严格同步：初始设false，首次修改即刻置true，保存成功后在fetch().then()或await save()的resolve分支中置false；禁用beforeunload改title，因执行不保证且ios safari后台tab不刷新。

怎么让 document.title 实时反映编辑状态

直接赋值 document.title 就生效，但必须和编辑器内部的脏标记（isDirty）严格同步，否则用户看到的标题和实际状态对不上。

• 初始加载时设 isDirty = false，内容首次修改时立刻设为 true，别等 onBlur 或 submit 才判断
• 保存成功后，必须在 fetch().then() 或 await save() 的 resolve 分支里设 isDirty = false，不能只靠按钮点击事件还原
• 避免用 beforeunload 里改 title——该事件不保证能执行完，且浏览器可能已冻结 JS
• iOS Safari 后台 Tab 不刷新标题，所以不要依赖它做关键状态提示（比如“正在上传”）

表单输入时如何触发浏览器原生验证反馈

光写 required 或 type="email" 不会自动弹红框或提示，必须手动调用 checkValidity() 才能激活 UI 反馈。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• 监听 input 事件，在 handler 里调用 event.target.checkValidity()，这样边输边验、即时变色
• 别用 reportValidity() 替代——它会强制弹默认气泡，打断用户操作流
• setCustomValidity("错误信息") 设非空字符串才表示失败；清空必须显式调用 setCustomValidity("")，漏掉这步会导致字段永远标红
• :invalid 伪类不会在页面加载完就生效，得先触发一次验证（比如脚本调用 checkValidity()），CSS 才会响应

动态更新下拉菜单背景色要绕开哪些限制

原生 <select></select> 的样式无法用 CSS 根据 value 值自动切换，必须用 JS 绑定 change 事件手动改内联样式或 class。

• 不要给 <select></select> 加 transition: background-color——多数浏览器不支持平滑过渡，会闪烁或失效
• 优先用 class 切换（如 el.classList.toggle('status-completed', value === 'Completed')），比反复写 style.backgroundColor 更易维护
• 选项文本建议用业务语义词（如“已发货”），别用英文 value 值做判断依据，避免中英文混用导致逻辑错乱
• 记得加 aria-label，否则屏幕阅读器读不出状态变化

用 <dialog></dialog> 做反馈弹窗时容易忽略的细节

<dialog></dialog> 是语义最干净的模态方案，但 Safari 15.4 之前不支持，且默认不居中、不带遮罩，这些都得补。

• 必须用 dialog.showModal() 打开，不能只改 display —— 否则焦点管理、Esc 关闭、背景锁定全失效
• 关闭后监听 close 事件清理状态，比如重置表单、启用按钮，别只靠点击按钮就认为流程结束
• 后端返回错误时，用 switch (data.error) 匹配字段值来决定提示文案，别解析中文 message 字符串——翻译一变逻辑就崩
• 网络异常（如 TypeError: Failed to fetch）必须单独捕获，不能和 4xx/5xx 混在一起处理

真实项目里最常出问题的不是“怎么做”，而是状态同步时机：title 没等保存回调就还原、表单验证没清空 custom validity、dialog 关闭后没重置按钮 disabled 状态——这些都不是语法错误，而是时间差导致的 UI 和数据错位。

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