如何通过 JavaScript 在点击提交按钮后显示加载图标-js教程-PHP中文网

如何通过 JavaScript 在点击提交按钮后显示加载图标

本文介绍如何在用户点击 HTML 表单的按钮后，动态将按钮文字改为“Logging in”并右侧显示加载 GIF 图标，不使用标签，仅基于 CSS 背景图与 jQuery 实现。

本文介绍如何在用户点击 html 表单的 `` 按钮后，动态将按钮文字改为“logging in”并右侧显示加载 gif 图标，不使用 `

在 HTML 中，是自闭合的替换元素（replaced element），它不支持子节点（如），因此直接在 submit.val() 中拼接 HTML 字符串（如 'Logging in' + ）是无效且语法错误的——JavaScript 会将其识别为非法 JSX 或未定义变量，导致脚本中断。

正确的解决方案是：利用 CSS background-image 将加载 GIF 作为按钮背景，并通过 background-position 精确定位到右侧，同时用 JavaScript 动态更新按钮文本并禁用交互。该方法兼容所有现代浏览器，无需修改 HTML 结构，严格遵循仅使用的要求。

✅ 推荐实现（纯 CSS + jQuery）

以下是完整、可运行的代码示例：

Java 接口排错助手

在调试 Java 后端 API 故障时使用此技能，尤其适用于以下任务：分析日志、跨 Controller、Service 和 Mapper 层追踪请求、定位异常根因、检查 SQL 执行或参数流转，以及生成简洁的诊断结论与修复方案。

下载



  <meta charset="UTF-8"><title>Login Form</title><style>
    /* 基础按钮样式（建议显式设置宽高与盒模型） */
    input[type="submit"] {
      border: 1px solid #ccc;
      background-color: #f8f9fa;
      color: #333;
      font-size: 14px;
      padding: 8px 16px;
      cursor: pointer;
      /* 关键：启用背景图 & 确保文字左对齐，为图标留出右侧空间 */
      background-repeat: no-repeat;
      background-position: right center;
      background-size: 16px 16px; /* 匹配 GIF 原始尺寸 */
      text-align: left;
      /* 防止文字被背景图遮挡（添加右侧内边距） */
      padding-right: 28px;
      transition: background-color 0.2s;
    }

    input[type="submit"]:disabled {
      opacity: 0.7;
      cursor: not-allowed;
    }
  </style>

⚠️ 注意事项与最佳实践

尺寸匹配：确保 GIF 图标尺寸（如 16px × 16px）与 background-size 及 padding-right 协调，避免裁剪或错位；
无障碍友好：禁用状态（disabled）会自然移除键盘焦点和屏幕阅读器交互，符合 WCAG 标准；
防抖与恢复：真实项目中，应在 AJAX 请求完成后恢复按钮（如 submitBtn.prop('disabled', false).val('Login').css('background-image', 'none')），此处为简化演示未展开；
无 jQuery 替代方案：若需原生 JS，可将 $(...).on(...) 替换为 form.addEventListener('submit', ...)，submitBtn.style.backgroundImage = 'url(...)'；
不要用 type="image"：虽然支持 src，但它会强制提交坐标参数、无法显示文字，且语义上不符合“带文本的加载按钮”需求。

通过 CSS 背景图方案，我们既满足了设计需求（文字+图标共存），又保持了语义正确性与技术可行性，是处理加载状态的最佳实践。