提交时旋转光标答案

【问题标题】：Spinning cursor on submit提交时旋转光标
【发布时间】：2016-12-20 08:44:55
【问题描述】：

我认为这是一个很常见的问题，但我一直无法找到可行的解决方案。当用户单击表单的提交按钮时，我希望光标开始旋转 (cursor: wait)。

<button type="submit" class="save btn btn-grey" id="button">Gem</button>

这是我尝试过的解决方案： https://jsfiddle.net/Zht9B/240/

问题在于，一旦用户将鼠标从按钮上移开，忙碌的光标就会消失。我希望光标保持忙碌状态，直到新页面加载完毕。（提交表格会跳转到新页面）

【问题讨论】：

您的问题显示没有任何努力。你试过什么？
你的意思是cursor: wait？
重复的问题是一切都是jQuery，OP从来没有提到jQuery。
这是在 javascript 中执行此操作的方法：document.getElementsByTagName("body")[0].style.cursor = 'wait'; 或 document.body.style.cursor = 'wait';，请注意，这只适用于将鼠标悬停在正文内的其他元素上。
@KevinKloet 重新打开，但是 OP 在他们的示例中使用了 jQuery (jsfiddle)。

标签： javascript css

【解决方案1】：

将您希望它出现的任何元素的 CSS 类（可能是 body...）更改为另一个包含以下内容的类：

cursor: wait

提交时（在本例中使用 javascript/jquery）。

注意：Body 在 JS fiddle 中不起作用，但是您可以制作一个容器 div 并通过这种方式对其进行测试，我已经修改了 fiddle 给您一个示例。

即。

$("#button").click(function(){ 
    $(".contain").addClass("wait");
    $(this).addClass("wait");
});

【讨论】：

您能否更详细地解释一下如何做到这一点？我很抱歉成为这样的初学者。
我已经更新了小提琴，如果你看不到，请告诉我。

【解决方案2】：

您可以将 onsubmit 事件绑定到表单。在下面的示例中，我在提交按钮上添加了一个 onclick，因为 stackoverflow 不支持表单。

//onclick of submit button
document.getElementsByClassName('save')[0].onclick = function() {
  //save element for the removing of the class after the timeout.
  var elem = event.target;
  //add classes to the html and clicked button.
  event.target.className += " wait";
  document.getElementsByTagName('html')[0].className += "wait";
  //set timeout for removing the classes after 3 seconds.
  window.setTimeout(function() {
    elem.className -= " wait";
    document.getElementsByTagName('html')[0].className -= "wait";
  }, 3000);
}

.wait {
  cursor: wait;
}

&lt;button type="submit" class="save btn btn-grey" id="button"&gt;Gem&lt;/button&gt;

【讨论】：