有沒有辦法以編程方式觸發TAB鍵將焦點移動到下一個可調焦元素？

我正在編寫一個單元測試來測試我的網頁上的Tab鍵順序，並且我找不到一種方法來模擬用戶的TAB鍵的鍵入，以專注於下一個可調焦元素，儘管這似乎是一件容易的事。有沒有辦法以編程方式觸發TAB鍵將焦點移動到下一個可調焦元素？

jQuery被允許，而純JavaScript解決方案是首選。任何形式的幫助表示讚賞。

// TODO 
 
function triggerTab() { 
 

 

 
} 
 

 
$("#btn-save").focus(); 
 
triggerTab(); 
 

 
// Expect the focus is on the cancel button now. 
 
console.log(document.activeElement.id);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<p> some text </p> 
 
<button id="btn-save"> save </button> 
 
<button id="btn-cancel> cancel </button>

附：在下一個可聚焦元素上調用focus（）是不可接受的，即使您可以編寫代碼來確定下一個可聚焦元素。因此，這條道路是不是我想要的：

function getAllFocusables() { 
    ... 
} 

var focusables = getAllFocusables(), 
    index = focusables.indexOf(document.activeElement); 

$(focusables[index+1]).focus();

來源

2016-11-06 Jason Lee

沒有沒有觸發tab鍵的方式，但有一種方法可以找到DOM中的下一個可聚焦元素並將其聚焦。也許無論你用什麼單元測試這個，有觸發鍵的方法，我不知道，我從來沒有單元測試簡單的事件處理程序？ – adeneo

爲什麼你不想用更簡單的方法直接聚焦你想要的東西。 – vlaz

@vlaz因爲這是爲了在我的項目中對模塊進行單元測試，所以模塊有js代碼來使用我在問題末尾提出的相同想法來管理tab鍵順序。我認爲使用相同模塊的代碼來測試自己是愚蠢的。這就是爲什麼我想以這種方式測試它，設置標記，以編程方式觸發標籤並檢查標籤順序是否如預期的那樣。 –

您不能模擬從使用JavaScript標準的瀏覽器一個tab鍵。

如果您使用的是無頭的瀏覽器，像phantomjs比如做單元測試，你可以模擬tab鍵

var webPage = require('webpage'); var page = webPage.create(); page.sendEvent('keypress', page.event.key.Tab);

來源

2016-11-07 17:45:16 Adam

有沒有辦法以編程方式觸發TAB鍵將焦點移動到下一個可調焦元素？

回答

相關問題