私のhtmlには要素のリストが含まれています。矢印キーを使用して要素を選択したいと思います。
これが私のコードです:[http://jsfiddle.net/T8S7c/]
私が欲しいのは、ホバー効果のように、選択した要素にフォーカスを置く必要があるキーをプリーシングすることです(たとえば、初めて下キーを押した場合、アンバジにフォーカスを合わせる必要があります)
キーイベントのコードは知っていますが、キーを押すことに焦点を合わせる方法がわかりません。
誰かがこれで私を助けることができますか
私のhtmlには要素のリストが含まれています。矢印キーを使用して要素を選択したいと思います。
これが私のコードです:[http://jsfiddle.net/T8S7c/]
私が欲しいのは、ホバー効果のように、選択した要素にフォーカスを置く必要があるキーをプリーシングすることです(たとえば、初めて下キーを押した場合、アンバジにフォーカスを合わせる必要があります)
キーイベントのコードは知っていますが、キーを押すことに焦点を合わせる方法がわかりません。
誰かがこれで私を助けることができますか
これを解決するための私の戦略は、リンクの配列を介してフォーカスの順序を指定することと、どのリンクにフォーカスするかを指定する変数を設定することです。
var order = new Array("l1", "l2", "l3", "l4");
var current = -1;
function updateCurrent(inc) {
current = (current + inc) % order.length;
current = Math.max(current, 0);
}
document.onkeydown = function(evt) {
evt = evt || window.event;
switch (evt.keyCode) {
case 38:
updateCurrent(-1);
document.getElementById(order[current]).focus();
break;
case 40:
updateCurrent(1);
document.getElementById(order[current]).focus();
}
};
スクリプトを更新しました。これを見てください。フィドル: http: //jsfiddle.net/T8S7c/6/
var myLinks = document.getElementsByTagName("a");
var myLinksIndex = 0;
myLinks[myLinksIndex].focus();
document.onkeydown = function(evt) {
evt = evt || window.event;
switch (evt.keyCode) {
case 38: // Up arrow
if(myLinksIndex > 0){myLinks[-- myLinksIndex].focus();}
break;
case 40:// Down arrow
if(myLinksIndex < myLinks.length){myLinks[++ myLinksIndex].focus();}
break;
}
};