jstarted.com
JavaScript/HTML/CSSのノウハウや覚書を掲載するブログ
2013.8.30

上下キーでフォーカス位置を移動させる

Category:

通常のサイト制作ではキーごとの動作はブラウザの標準にまかせてしまっているので、ほとんど使う機会のないjavascriptでのキー判定ですが、いつかなにかに使うことになるかもしれないので、練習がてら書いてみました。

今回は方向キーの上下2種に限定して、リストのリンクを移動するコードを書きました。

var key_decision = function(){
	var	win = $(window),
		elm = $('ul > li > a'),
		elm_arr = [],
		fcs_num = 0,
		fcs_flg = [];

	// 対象を配列化+フォーカスされた/外れた際のイベントを指定
	elm.each(function(indx){
		var num = indx;
		elm_arr[indx] = $(this);
		fcs_flg[indx] = false;
		$(this).focusin(function(){
			fcs_num = num;
			if( fcs_flgg[indx] === false ){
				fcs_flgg[indx] = true;
			}
			fcs_flg[indx] = true;
		}).blur(function(){
			fcs_flg[indx] = false;
			if( fcs_flg.indexOf(true) < 0 ) {
				fcs_num = 0;
			}
		});
	});

	// キー判定とフォーカス移動
	win.keydown(function(evnt){
		if( evnt.which == 38 ){
			if( fcs_flg.indexOf(true) < 0 ) {
				elm_arr[0].focus();
			} else if( fcs_num > 0 ){
				elm_arr[fcs_num - 1].focus();
			}
			evnt.preventDefault();
			evnt.stopPropagation();
		}
		if( evnt.which == 40 ){
			if( fcs_flg.indexOf(true) < 0 ) {
				elm_arr[0].focus();
			} else if( fcs_num < elm_arr.length - 1 ){
				elm_arr[fcs_num + 1].focus();
			}
			evnt.preventDefault();
			evnt.stopPropagation();
		}
	});
};

$(document).ready(function(){
	key_decision();
});

動作のサンプルはこちら
上下キーでフォーカス位置を移動させる - js do it

思ったよりも手こずりました。というのも、今回はフォーカス位置を移動する内容にしたので、上下のキーだけでなくTabキーの挙動も判定しないといけなかったためです。フォーカスされた/外れたを判別してくれるjQueryのfocusin()とblur()のおかげでこれにはすぐに対応できました。

jstarted.comはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を
獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、
Amazonアソシエイト・プログラムの参加者です。

クリエイティブ・コモンズ・ライセンス
jstarted.com by yoichi kobayashi is licensed under a Creative Commons 表示 3.0 非移植 License.