眼眸繁星
2021-05-11 17:14:45
我正在使用Bootstrap 4進(jìn)行樣式設(shè)置。我的頁(yè)面上有一個(gè)按鈕,希望用戶能夠通過(guò)擊鍵來(lái)觸發(fā)。我添加了以下Javascript,它可以正常工作。<script> document.addEventListener('keyup', function (event) { if (event.defaultPrevented) { return; } var key = event.key || event.keyCode; if (key === 'j' || key === 'KeyJ' || key === 74) { document.getElementById("myButton").click(); }});</script>HTML只是<button id="myButton" class="btn btn-success btn-lg" type="submit">Button</button>它看起來(lái)就像Bootstrap設(shè)置的任何按鈕一樣。問(wèn)題。通常,當(dāng)您按下按鈕時(shí),Bootstrap會(huì)在點(diǎn)擊后播放一個(gè)小動(dòng)畫。但是,當(dāng)單擊由JavaScript觸發(fā)時(shí)(即,用戶使用了按鍵),則不會(huì)發(fā)生該動(dòng)畫,并且用戶也不會(huì)收到有關(guān)單擊按鈕的事實(shí)的任何反饋。由于用戶將主要通過(guò)擊鍵來(lái)觸發(fā)單擊,因此,我確實(shí)希望該單擊反饋可見(jiàn)。我的代碼破壞了Bootstrap動(dòng)畫,怎么了?是否有另一種方法可以讓我像這里一樣通過(guò)擊鍵來(lái)觸發(fā)按鈕單擊,但又不會(huì)破壞單擊反饋動(dòng)畫?CODEPEN:https : //codepen.io/anon/pen/byebxg 在Codepen演示中,您可以嘗試將鼠標(biāo)懸停在該按鈕上,然后單擊該按鈕,然后觀看Bootstrap動(dòng)畫的小片段(演示中沒(méi)有任何作用)。由于JavaScript代碼段的原因,您還可以通過(guò)按“ j”來(lái)“單擊”它(我添加了警報(bào)以表明按鍵監(jiān)聽(tīng)正在工作)。但是,以這種方式“單擊”按鈕時(shí),不會(huì)顯示按鈕動(dòng)畫。即使單擊是由JS腳本觸發(fā)的,也可以使它播放嗎?
3 回答

POPMUISE
TA貢獻(xiàn)1765條經(jīng)驗(yàn) 獲得超5個(gè)贊
這是用于顯示處理的Loader用途-
<button class="btn btn-success btn-lg" type="submit" id="load" data-loading-text="
<i class='fa fa-circle-o-notch fa-spin'></i> Processing Order">Button</button>
JavaScript代碼是-
<script>
$('.btn').on('click', function() {
var $this = $(this);
$this.button('loading');
setTimeout(function() {
$this.button('reset');
}, 8000);
});
</script>
添加回答
舉報(bào)
0/150
提交
取消