本文介绍如何在用户点击 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 执行或参数流转，以及生成简洁的诊断结论与修复方案。
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<form class="ajaxform" id="ajaxform" method="post" data-action="">
<input name="submit" id="submit" type="submit" value="Login">
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function($) {
$('.ajaxform').on('submit', function(event) {
event.preventDefault();
const form = $(this);
const submitBtn = form.find('[type="submit"]');
const action = form.attr('data-action') || '/login';
// 1. 禁用按钮防止重复提交
submitBtn.prop('disabled', true);
// 2. 更新按钮文字
submitBtn.val('Logging in');
// 3. 设置加载 GIF 为背景图（自动覆盖原有背景）
submitBtn.css('background-image', 'url("https://i.ibb.co/QCMtktm/ns.gif")');
});
});
</script>
</body>
</html>⚠️ 注意事项与最佳实践
- 尺寸匹配：确保 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 背景图方案，我们既满足了设计需求（文字+图标共存），又保持了语义正确性与技术可行性，是处理 加载状态的最佳实践。
立即学习“Java免费学习笔记（深入）”；
