如何在焦點位於我的樣式DIV時捕捉按鍵？

我正在使用jQuery 1.12。我的頁面上有幾個樣式的選擇菜單。當其中一個激活時，我希望能夠按「Tab」，然後將焦點切換到下一個樣式的選擇菜單。我試圖如何在焦點位於我的樣式DIV時捕捉按鍵？

return $('div.select-styled:first').keydown(function(e) { 
    alert("key pressed"); 
    if (e.which === 9) { 
    $('div.select-styled.active').each(function() { 
     return $(this).removeClass('active').next('ul.select-options').hide(); 
    }); 
    return $('div.select-styled:second').focus().click(); 
    } 
});

但沒有發生。您可以從我的小提琴 - http://jsfiddle.net/cwzjL2uw/5/中看到，您可以單擊姓氏字段上的「選項卡」，並激活第一個樣式的選擇菜單，但第二次單擊「選項卡」將不會執行任何操作。如何從我的樣式選擇菜單中捕捉按鍵事件？

來源

2016-12-30 Dave

樣式化的select元素通過div元素實現，除非具有tabindex屬性，否則無法獲得焦點。如果您希望元素變得可以聚焦，您可以將tabindex設置爲-1。

爲您的代碼，該wrapper可以設置爲以下幾點：

var $wrapper = $("<div />", { 
    'class': "select", 
    'tabindex': '-1' 
})

然後你的代碼可能爲你的期望的工作。

然而，標籤的焦點已經是一個基本的功能，borwser提供，這意味着，而不是聽tab鍵，你就應該聽到focus和blur事件和更新控制的代表性。在這種情況下，您應該將tabindex設置爲1，並添加事件處理程序。然後您可以刪除事件偵聽器以及body上的偵聽器來檢測焦點丟失。

這裏是更新的小提琴，你可以檢查： JS Fiddle

參見：

來源

2016-12-31 04:09:11

此外，你需要使用'第n個孩子（2 ）'選擇第二個'select'元素而不是'second'。 –

感謝您的支持。雖然它在Chrome上效果很好（我可以從一個菜單切換到下一個菜單），但在Firefox上，我無法從一個菜單切換到另一個菜單。這是一種使代碼跨瀏覽器的方式 - 至少它可以在Chroem和Firefox上運行嗎？ – Dave

更新了代碼（[fiddle]（http://jsfiddle.net/cwzjL2uw/8/））並將'input'的'tabindex'和'select'設置爲'1'。因此，firefox將迭代這些元素的焦點。 –

如何在焦點位於我的樣式DIV時捕捉按鍵？

回答

相關問題