[javascript] tab키 누를 때 input 이동 순서를 내가 원하는 대로 제어하기 (feat. tabindex)

오늘의 문제점

tab(탭)키를 누를 때 마다 input이 이동되는데 그 이동되는 순서를 내가 원하는 대로 제어하는 방법이 궁금하다. 

 

방법

tabindex 속성을 이용하기

 

사용예시

	1번 input 창 <input type="text" tabindex="3">
	2번 input 창 <input type="text" tabindex="2">
	3번 input 창 <input type="text" tabindex="1">
	4번 input 창 <input type="text" tabindex="4">
	5번 input 창 <input type="text" tabindex="5">
	6번 input 창 <input type="text" tabindex="0">
	7번 input 창 <input type="text" tabindex="-1">

• tabindex 속성 값을 원하는 순서대로 입력해주면, tab키를 눌렀을 때 속성 값 순서대로 이동하게 된다.
• 단, tabindex 속성 값을 -1로 설정하게 되면 이 input에는 tab키를 눌렀을 때 포커스가 가지 않는다.
• tabindex 속성 값은 1부터 오름차순으로 순서가 정해지며, 0이 가장 마지막 순서에 위치한다.
• 위의 작성대로라면 tab키를 눌렀을 때 포커스는 3번 input창 -> 2 -> 1번 -> 4번 -> 5번 -> 6번 순서가 되며, 7번은 포커스가 가지 않는다.