最轻量安全的表单提交防重复方案是：提交时设按钮 disabled 并动态更新文字（input 用 value，button 用 textContent），配合 data-loading 属性控制 CSS 加载动画，超时自动恢复并提供取消机制。

表单提交时禁用按钮并显示 loading 文字

直接改 button 的 disabled 属性 + 修改 textContent 是最轻量、兼容性最好、且不会引发表单重复提交的方式。别用 CSS 遮罩层或额外 DOM 节点，容易干扰焦点、表单校验或屏幕阅读器。

常见错误是只改文字不加 disabled，用户连点两次照样触发两次 submit；或者用了 pointer-events: none 但没同步禁用表单逻辑校验（比如 required 字段仍可被跳过）。

实操建议：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• 在 form.addEventListener('submit', ...) 回调里第一时间获取提交按钮（如 form.querySelector('button[type="submit"]')），保存原文字，再设 btn.disabled = true 和 btn.textContent = '提交中...'
• 成功或失败后，**必须**恢复 btn.disabled = false 和原始文字（不能硬编码回填，要存起来）
• 如果按钮是 input[type="submit"]，改的是 value，不是 textContent

用 CSS 实现 loading 图标（不依赖 SVG 或第三方图标库）

纯 CSS 的省略号动画或旋转边框足够应付多数场景，避免额外请求和字体加载失败导致图标空白的问题。

立即学习“前端免费学习笔记（深入）”；

注意：不要用 animation: spin 1s infinite 这种无上下文的类名，容易和全局样式冲突；也不要对整个按钮加 opacity: 0.6，会降低可访问性对比度。

实操建议：

• 用伪元素 ::after 叠加小圆点动画，例如：

  .btn-loading::after {
    content: '.';
    animation: ellipsis 1.5s infinite;
  }
  @keyframes ellipsis {
    0% { content: '.'; }
    33% { content: '..'; }
    66% { content: '...'; }
  }

• 若需旋转效果，用 border + border-color: transparent 拼出四分之一圆弧，再配合 transform: rotate()，比 border-radius: 50% 更可控
• 所有 loading 状态样式必须绑定在带 data-loading="true" 的按钮上，而不是靠 JS 切换 class 名——避免 class 冲突或遗漏清理

防止网络慢时用户反复点击，但保留「取消」能力

单纯禁用按钮会卡死用户：比如接口卡住、用户想改数据、或页面失去响应。得给一个明确的「可逆」出口。

常见错误是加个「取消」按钮但没重置表单状态，或点了取消后按钮仍 disabled，导致无法再次提交。

实操建议：

• 提交后启动一个 setTimeout（比如 8 秒），超时自动恢复按钮并弹提示「请求超时，请重试」
• 在按钮旁加一个极小的「×」图标（font-size: 12px），点击即 abort() 当前 fetch 请求，并还原按钮状态
• 如果用的是 XMLHttpRequest，记得在 btn.addEventListener('click', ...) 里提前检查 xhr.readyState > 0 && xhr.readyState ，再调 <code>xhr.abort()

服务端返回 4xx/5xx 时，按钮状态恢复但错误信息要显眼

很多人只处理了 success 分支，失败时按钮恢复了，但错误提示埋在 console 里，或只用 alert() 打断操作流。用户根本不知道哪错了。

关键不是「有没有提示」，而是「提示是否和表单字段对齐」——比如邮箱格式错，就得定位到邮箱输入框旁，而不是顶部弹个 banner。

实操建议：

• 后端返回的错误结构尽量统一，例如 { "field_errors": { "email": "邮箱格式不正确" } }，前端按 key 查找对应 input[name="email"]，在其后插入 <small class="error"></small>
• 恢复按钮状态前，先清空所有已有 .error 元素，再根据新响应渲染，避免旧错误残留
• 别用 innerHTML += 插入错误，会清空已有的事件监听（比如自定义验证的 focusout）；用 insertAdjacentHTML('afterend', ...) 更安全

实际中最容易被忽略的，是「loading 状态下用户切走标签页再切回来」这个场景——此时按钮仍是 disabled，但用户感知不到当前正在加载，也不知道要不要等。需要配合 visibilitychange 事件做兜底判断。