テーブルのセルにinputが入っている形のフォームで上下移動する

Tweet

Category JavaScript 2018/10/19

問題

TABLEのセルにinput要素が並んでいる形のフォームで、Tab、Shift + Tab で左右の入力欄に移動は可能ですが、上下の入力欄にもキーボードで移動したいです。

答え

Ctrl + 上下キーで移動できるようにする例。

jQuery 使用。

対象のテーブルで、keyupイベントが発生したときに、入力欄にいたら、
入力欄の親のTR要素を探して、
前または次のTRの中で、
同じ位置の入力欄を探して、フォーカスを移す。

$(function(){

	// CTRL+上下
	$('#対象のテーブル').on('keyup', 'input,textarea', function(e){
		if (e.ctrlKey) {
			if (e.keyCode==38 || e.keyCode==40) {
				var tr = $(this).closest('tr');
				if (tr[0]) {
					var p = $('input,textarea', tr[0]).index(this);
					if (e.keyCode==38) {
						var _tr = $(tr).prev();
					} else {
						var _tr = $(tr).next();
					}
					if (_tr[0]) {
						$('input,textarea', _tr[0]).get(p).focus();
					}
				}
			}
		}
	});

}

画面の作り方によって状況が異なると思うので、調整されたし。