現在、Web漫画アプリケーションで作業しています。さらに漫画を読むときは、矢印キー（左右）を使用して次のパネル。私がやってみたいのは、矢印が使用されるたびにフォーカスを移動し、要素が初めてページにフォーカスしているときにわずかなアニメーションを開始することです。keydown（）に基づいてtabindexを使用して次の要素にフォーカスを移動
既にフォーカスされている要素に再びフォーカスが当たった場合、アニメーションは繰り返されません。
私はちょっと落としてしまっただけで、フォーカスを正しくシフトするには、tabindexをループする必要があります。私はそれをどうやって行うのか分かりません。 StackOverflowコミュニティの新機能ですので、いくつかの回答をお待ちしております。
tabIndexが登録されているすべての要素に直接アクセスできるかどうかはわかりません。他の方法では、配列内のすべての要素を維持し、次にイベントごとにフォーカスを変更します。似た何か：
<!DOCTYPE html>
<html>
<body onkeydown="keyDownFn()" onload="init()">
<p>Try navigating the links below by using any key on you keyboard </p>
<p><div id="myAnchor1" tabIndex="1">Link 1</div></p>
<p><div id="myAnchor2" tabIndex="1">Link 2</div></p>
<p><div id="myAnchor3" tabIndex="1">Link 3</div></p>
<script>
var elements;
var current = 1;
var max = 0;
function keyDownFn() {
// you can add a check for specific keys here.
elements[current % max].focus();
current = current+1;
}
function init() {
// all elements that you want to focus in turn can be stored on load.
elements = document.getElementsByTagName('div');
max = elements.length;
document.getElementById("myAnchor1").focus();
}
</script>
</body>
</html>
https://jsfiddle.net/4my90g4v/
focus()でフィドルを使用すると、アニメーションをやっているあなたの要素に登録onFocusメソッドを呼び出す必要があります。
Anurag Sinhaありがとうございます！私は自分のフォーカス機能の中にアニメーションを入れなければならないと思いますか？また、私の仕事のすべてをどのように配列に投げて2番目のアイデアをテストするかを私に見せてもらえますか？これらの関数セットに応じて複数のページがあることを考えれば、もっと簡単になるようなことをする必要があるでしょう。 –
また、左矢印と右矢印を基に前後に移動するコードが必要です。あなたが示したこのコードは、それを前進させる数学の上に座っています。実際のイベント自体は重要ではありません。それは理にかなっていますか？ –
ここで更新されたフィドルですが、onKeyDownイベントリスナーを引き続き使用できます。あなただけの変更は、イベントに関するすべての詳細を持つイベントオブジェクトを受け取ることです（更新されたフィドルでkeyDownFn関数を参照してください）。イベントオブジェクトからkeyCodeを使用してどのキーが押されたかを取得し、それに基づいてロジックを更新することができます。私はフィドルを更新しました - https://jsfiddle.net/4my90g4v/1/を参照してくださいこれは左右の矢印（keyCode 37と39）に基づいてフォーカスを変更します。うまくいけば、これが役に立ちます。 –
あなたは 'trigger（ 'focus'）'を試しましたか？ – madalinivascu
あなたは何を意味するのか分かりません。それは、フォーカスが隠されたり、表示されなくなるだけです。それは、異なる要素の大きなセットでは機能しません。 –