表单提交不跳转需用event.preventdefault()阻止默认行为，fetch发送请求后动态创建带css动画的fixed定位提示框，兼容错误处理、移动端及无障碍访问。
表单提交后不跳转页面，只弹出浮动提示
直接阻止默认提交行为，用 JavaScript 拦截 submit 事件，再手动发请求（如 fetch），成功后插入或显示一个 div 元素作为浮动提示。关键不是“弹窗”，而是“不刷新 + 视觉反馈”。
常见错误是没调用 event.preventDefault()，导致页面跳转或刷新，浮动层刚建好就消失了；或者把提示写死在 HTML 里却用 display: none 隐藏，结果 JS 没正确切换状态。
- 表单必须有
id或能被唯一选中（比如document.querySelector('form')） - 推荐用
fetch而非XMLHttpRequest，更简洁且原生支持async/await - 浮动提示元素建议动态创建，避免污染初始 DOM，也方便复用
用 CSS 实现轻量级浮动提示（无第三方库）
不需要 Bootstrap 或 Toast UI，纯 CSS 就能做出带淡入、居中、自动消失的提示。核心是控制 position: fixed、z-index 和 @keyframes 动画。
容易踩的坑：父容器设置了 overflow: hidden 会裁剪提示框；z-index 值不够大会被其他组件盖住；动画时间太短用户来不及看清。
- 提示
div应设position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 9999; - 用
@keyframes fadeOut配合animation实现 3 秒后淡出并移除节点 - 加
box-shadow和圆角提升视觉层级感，比如border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.15)
fetch 提交失败时也要显示对应提示
只处理成功响应（response.ok === true）不够——网络中断、500 错误、CORS 拒绝等都会进 catch 或返回非 ok 状态，此时仍需浮动提示，但内容要区分。
典型误区是把错误信息直接塞进提示，比如显示 "TypeError: Failed to fetch"，用户完全看不懂。应映射为友好文案，并记录原始错误到控制台供调试。
- HTTP 状态码 400 类：提示
"请检查填写内容"，并高亮对应input字段 - 状态码 500 类：提示
"服务器忙，请稍后再试"，避免暴露后端细节 - 捕获
fetch抛出的异常时，务必检查err.name === 'AbortError'（超时场景）
移动端适配与焦点管理问题
在 iOS Safari 或安卓 Chrome 上，浮动提示可能被虚拟键盘顶起、位置偏移，或点击关闭后焦点没回到表单，影响连续操作。
这不是样式问题，而是浏览器对 fixed 定位在输入唤起键盘时的重排逻辑不同。另外，无障碍访问要求提示出现时应通知屏幕阅读器。
- 避免用
top: 0，改用top: env(safe-area-inset-top, 20px)兼容刘海屏 - 提示插入后立即调用
element.setAttribute('role', 'alert')，触发 ARIA alert - 关闭提示时，用
formElement.focus()主动恢复焦点，而不是依赖用户手动点回
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
