左矢印と右矢印を使用してフォーカスを設定する(HTML + JS)
-
06-07-2019 - |
質問
左矢印をタブボタンのように動作させ(フォーカスを次のフォーカス可能なアイテムに設定)、右矢印をshift + tabのように動作させます(フォーカスを前のフォーカス可能なアイテムに設定します)?
ここまで来ました:
$().keypress(function(e) {
if (e.keyCode == 37) {
alert('I want to do a shift-tab');
}
else if (e.keyCode == 39) {
alert('I want to do a tab');
}
});
しかし、グーグルはあまり役に立たないので、もう少しグーグルをしている間にここに簡単な投稿をしようと思いました。
ありがとう!
ああ、それは純粋にFF3.0向けなので、他のブラウザの迷惑を心配する必要はありません。
解決
これまでのものは問題ないようです。
「フォーカス可能な」アイテムのリストを保持し、現在のアイテムへのポインタを保持しながらリストを繰り返し処理することができます。
// or $('input')..depends what you want to focus on
var nodes = $('.focusable'), idx = -1;
$().keypress( function(e) {
if (e.keyCode === 37) {
nodes.get(++idx).focus();
}
else if (e.keyCode === 39) {
nodes.get(--idx).focus();
}
});
これは大まかな概要です。何かを行う前に idx
をチェックして、フォーカス可能な要素の配列の先頭または末尾をすり抜けないようにする必要があります。また、ユーザーがテキストボックス内にいるときにこれを呼び出すことに注意する必要があります。
所属していません StackOverflow