要实现内容修改后离开页面提示未保存，需用javascript监听textarea的input事件设isdirty标记，保存成功后重置该标记，并通过beforeunload事件触发浏览器默认提示；移动端需配合localstorage暂存草稿，spa中须及时清理监听器。
HTML文本域（<textarea></textarea>）本身不会自动感知内容是否被修改，要实现“内容修改后离开页面提示未保存”，关键不是让<textarea></textarea>自己说话，而是用JavaScript主动跟踪它的变化，并在用户试图离开时给出提示。
监听输入变化，设“已修改”标记
不能依赖change事件——它要等失焦才触发，容易漏掉未点别的地方就直接关页的情况。应优先用input事件，它在每次按键、粘贴、删除时都立即响应：
- 给
<textarea id="myArea"></textarea>绑定input事件，一旦触发就把全局标志isDirty = true设为真 - 同时可记录初始值（比如页面加载完读取
myArea.value），后续比对用得上 - 避免重复绑定：只在初始化时绑一次，不要每次聚焦都重新
addEventListener
提交成功后及时重置状态
用户点了“保存”按钮，AJAX或表单提交成功后，必须手动把isDirty设回false，否则哪怕刚存完，关页仍会弹提示：
- 在保存逻辑的
then或回调里写isDirty = false - 如果保存失败（如网络错误、校验不通过），
isDirty保持true，提示仍应保留 - 清空表单或点击“重置”按钮时，也要同步重置
isDirty和还原初始值
用beforeunload做最后提醒，但别指望自定义文案
现代浏览器（Chrome、Firefox、Edge）已禁用自定义提示文字，你写return "请保存！"完全无效。唯一可靠做法是：
- 监听
window.addEventListener('beforeunload', handler) - 在
handler里判断if (isDirty) e.preventDefault() - 注意：
e.preventDefault()必须同步执行，不能放在fetch回调或setTimeout里 - 提示语由浏览器统一显示：“离开此页面？您输入的数据可能未保存。”——这是标准且无法更改的
移动端与SPA需额外处理
这个方案在桌面浏览器效果稳定，但在实际项目中要注意两个常见坑：
-
移动端基本不支持beforeunload：iOS Safari 和多数安卓浏览器会忽略该事件，所以不能依赖它防丢失。建议搭配
localStorage实时暂存草稿（比如每300ms防抖存一次），让用户切走再回来还能恢复 -
单页应用（Vue/React）要清理监听器：路由跳转时若没调用
removeEventListener，旧的beforeunload处理器会越积越多，导致关页弹多次提示。应在组件卸载或离开路由时解绑
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
