矢印キーでリンクのフォーカスを移動する

キーボードの矢印キーでリンクのフォーカスを移動する処理を実装したのでメモしておきます。

サンプルコード

矢印キーの上下でフォーカスを移動するようにしてみます。

HTML

<ul>
	<li><a href="#">save</a></li>
	<li><a href="#">load</a></li>
	<li><a href="#">Q.save</a></li>
	<li><a href="#">Q.load</a></li>
	<li><a href="#">config</a></li>
</ul>

JavaScript

$(window).on('keydown', function(e) {
	if(e.keyCode === 38) { // ↑
		focus_prev();
		return false;
	}
	if(e.keyCode === 40) { // ↓
		focus_next();
		return false;
	}
});

/**
 * フォーカスを前に移動する
 */
function focus_prev() {
	// 現在のフォーカスを取得
	var currentFocusIndex = $('a').index($(':focus'));

	if(currentFocusIndex > -1) {
		for (var i = 0; i < $('a').length; i++) {
			if(i === currentFocusIndex && i > 0) {
				$('a').eq(i - 1).focus();
			}
		}
	}
}

/**
 * フォーカスを次に移動する
 */
function focus_next() {
	// 現在のフォーカスを取得
	var currentFocusIndex = $('a').index($(':focus'));

	if(currentFocusIndex > -1) {
		for (var i = 0; i < $('a').length; i++) {
			if(i === currentFocusIndex && i < $('a').length - 1) {
				$('a').eq(i + 1).focus();
			}
		}
	} else {
		$('a').eq(0).focus();
	}
}

矢印キーの上下でフォーカスを移動するデモページ

キーコードを変更することで、左右の矢印キーで移動させることもできます。

JavaScript

$(window).on('keydown', function(e) {
	if(e.keyCode === 37) { // ←
		focus_prev();
		return false;
	}
	if(e.keyCode === 39) { // →
		focus_next();
		return false;
	}
});

/**
 * フォーカスを前に移動する
 */
function focus_prev() {
	// 現在のフォーカスを取得
	var currentFocusIndex = $('a').index($(':focus'));

	if(currentFocusIndex > -1) {
		for (var i = 0; i < $('a').length; i++) {
			if(i === currentFocusIndex && i > 0) {
				$('a').eq(i - 1).focus();
			}
		}
	}
}

/**
 * フォーカスを次に移動する
 */
function focus_next() {
	// 現在のフォーカスを取得
	var currentFocusIndex = $('a').index($(':focus'));

	if(currentFocusIndex > -1) {
		for (var i = 0; i < $('a').length; i++) {
			if(i === currentFocusIndex && i < $('a').length - 1) {
				$('a').eq(i + 1).focus();
			}
		}
	} else {
		$('a').eq(0).focus();
	}
}

矢印キーの左右でフォーカスを移動するデモページ