提交旋轉光標

-3

我認爲這是一個很常見的問題，但我一直沒有找到一個可行的解決方案。當用戶點擊表單的提交按鈕時，我想讓光標開始旋轉（cursor: wait）。提交旋轉光標

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

這是我曾嘗試的解決方案： https://jsfiddle.net/Zht9B/240/

的問題是，忙狀態光標在用戶移動鼠標從按鈕離開就消失。我希望光標保持繁忙，直到新頁面加載完畢。（提交的形式導致了新的一頁）

來源

2016-12-20 Wessi

你的問題沒有顯示出努力。你有什麼嘗試？ –

你的意思是'cursor：wait'？ – putvande

與重複的問題是，一切都是jQuery和OP從未提及的jQuery。 –

變更爲哪個元素，你希望它出現在CSS類，大概身體 ...到包含其他類：

cursor: wait

在提交（在這種情況下與JavaScript/jQuery）。

注意：身體不能在JS小提琴中工作，但你可以做一個容器div和測試它，我已經修改小提琴給你一個例子。

即，

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

來源

2016-12-20 09:56:07 MikeDub

你能否詳細解釋一下如何做到這一點？我爲成爲這樣的初學者而道歉。 – Wessi

我已經更新了小提琴，讓我知道，如果你不能看到它。 – MikeDub

您可以將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; 
 
}

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

來源

2016-12-20 10:24:48

提交旋轉光標

回答

相關問題