Question

我认为这是一个非常常见的问题，但我还没能找到有效的解决方案。当用户点击表单的提交按钮时，我希望光标开始旋转（cursor: wait）。

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

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

问题是，只要用户将鼠标从按钮上移开，忙碌光标就会消失。我希望光标保持忙碌，直到加载新页面。（提交表格会导致新页面）

Answer 1

更改CSS类，以便您希望它出现在哪个元素上，可能是 body ...到另一个包含以下内容的类：

cursor: wait

提交（在这种情况下使用javascript / jquery）。

注意： Body 在JS小提琴中不起作用，但你可以制作一个容器div并以这种方式测试它，我修改了小提琴给你一个例子。

即

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

Answer 2

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

＆＃13;

//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);
}

＆＃13;

.wait {
  cursor: wait;
}

＆＃13;

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

＆＃13;

在提交上旋转光标

2 个答案: