在可聚焦元素上書寫arrowkey導航指南？

我想讓我的網頁上的鏈接和輸入元素具有箭頭鍵可導航的foucs。這很容易，只要考慮向上/向下箭頭鍵，它們與tab/shift +選項卡相同。在可聚焦元素上書寫arrowkey導航指南？

只需找到下一個元素並將其關注。

任何人都可以提出一個整潔的方式來處理情況，用戶希望對面的最接近的元素左/回事呢？

來源

2013-03-17 Cris Stringfellow

DOM結構沒有佈局。它既不是*垂直*也不是*水平*。這種區別是由瀏覽器的默認樣式表和/或頁面的CSS所做出的。下一個或前一個DOM元素只是DOM樹中的下一個或前一個節點。 – Boaz 2013-03-17 13:58:09

好點。它必須以某種方式基於元素偏移量getBoundingClientRects，但似乎很難/昂貴。 – 2013-03-17 13:59:29

其實這給了我一個想法。也許可以定義一個自定義排序索引。垂直相鄰元素相差+/- 1，水平相鄰元素相差+/-列高度。然後使用jQuery來選擇這些。由於我的菜單不會改變這應該是可能的。 – 2013-03-17 14:01:43

我認爲最好的方法是定義一個定製的，arrow_nav沿着這些線路訂貨指數，東西：

screen.addInput({ name:'height', arrow_nav_index:1 }); 
screen.addInput({ name:'weight', arrow_nav_index:2 }); 
screen.addInput({ name:'eye color', arrow_nav_index:3 }); 
screen.addInput({ name:'hair color', arrow_nav_index:4 }); 
screen.addInput({ name:'star sign', arrow_nav_index:5 }); 
screen.addInput({ name:'think star signs are bullshit?', arrow_nav_index:6 });

然後我們就可以之間垂直箭頭（1,2,3）和（4,5， 6）不改變列。此外，我們可以在（1,4），（2,5），（3,6）之間水平箭頭，而無需更改行。

這就是基本的想法。我認爲這是一個自定義地圖。或者簡單地通過爲一列輸入指定一個列高度來自動化它，然後隱含地給每個輸入添加它的順序的索引將使箭頭導航成爲現實。

Hooray。

來源

2013-03-17 19:33:54

在可聚焦元素上書寫arrowkey導航指南？

回答

相關問題