当按钮显示为正在加载时，fa fa微调器
当按钮显示为正在加载时，fa fa微调器
提问于 2021-07-21 23:57:16
如何在按钮显示正在加载时插入fa微调器...
Start按钮在加载文档之前是启用的，加载文档时该按钮是启用的，当您单击Start时，Start将更改为Loading ...，并且按钮内的Loading前面应该是一个fa fa spinner。
我尝试了几种方法，但都失败了，我向你寻求一点帮助，谢谢！
<input type="submit" id="submitButton" name="b1" value="Start"
disabled onclick="javascript:document.MyForm.b1.value='Loading...'" />回答 1
Stack Overflow用户
回答已采纳
发布于 2021-07-22 00:20:45
一个纯Javascript可以做到这一点，这是一个示例：
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<input type="submit" id="submitButton" name="b1" value="Start" onclick="submitClicked()" />
<i class="fa fa-refresh fa-spin loading-spinner" class="" style="font-size:24px"></i>
<script>
function toggleLoading(isLoading) {
let btn = document.querySelector("#submitButton")
btn.innerText = isLoading ? 'Loading...' : 'Start';
document.querySelector(".loading-spinner").style.display = isLoading ? "inline-block" : 'none';
}
function submitClicked(){
// do form submit here
toggleLoading(true);
}
toggleLoading(false)
</script>
</body>
</html>检查此代码笔Here
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68472781
复制相关文章
相似问题
腾讯云开发者
