tabindex 속성
tabindex 속성은
Tab 키를 사용하여 요소 간 이동 시
포커스 획득 순서를 설정합니다.
이 키를 누르면 페이지의 일부 요소(링크와 폼 요소)를 순차적으로 활성화할 수 있습니다. 활성 요소는 입력 포커스를 받게 됩니다.
input
및 textarea
유형의 입력 필드의 경우,
포커스는 필드에 커서가 깜박이고
텍스트를 입력할 수 있다는 것을 의미합니다.
링크 및 기타 요소의 경우
이는 어떤 식으로든 강조 표시됩니다(밑줄,
점선 테두리 등, 브라우저에 따라 다름).
포커스를 획득할 때 요소가 페이지에 보이지 않았다면(스크롤로 인해), 페이지가 해당 요소까지 스크롤됩니다.
요소에 tabindex 속성이 지정되지 않았거나
값이 0인 경우,
Tab 키를 사용한 이동은
HTML 코드에서 요소가 나타나는 순서대로 진행됩니다.
페이지에 tabindex가 지정된 요소가 있는 경우,
먼저 속성 값이 작은 요소부터(가장 작은 값은
1일 수 있음) 시작하여 속성 값의 오름차순으로
이동이 진행됩니다. 그러한 요소가 모두 방문된 후에는
tabindex가 지정되지 않았거나 값이
0인 요소들로 이동이 진행됩니다.
속성 값은 1부터 무한대까지의 정수입니다.
일부 번호가 누락되어도 문제가 되지 않습니다
(예를 들어, 2 번호가 없다면,
먼저 포커스는 tabindex가
1인 요소에 갔다가,
그 다음 tabindex가
3인 요소에 갑니다).
페이지에서 Tab 키를 누를 때 포커스가 있는
요소가 있다면(포커스는 Tab뿐만 아니라
요소를 마우스로 클릭하거나
autofocus
속성으로도 얻을 수 있음),
다음 Tab 키 누름은
현재 포커스가 있는 요소 다음 순서의
요소가 포커스를 얻도록 합니다(예를 들어,
현재 포커스가 tabindex
3인 요소에 있다면,
다음으로 포커스를 얻는 요소는
tabindex 4인 요소입니다).
입력 필드에 disabled
속성이 지정된 경우,
해당 필드에 tabindex 속성이 지정되어 있어도
Tab 키를 통한 이동에서 무시됩니다.
tabindex 속성은 다음 태그에 적용됩니다:
a,
input,
textarea,
button,
select,
area.
예제
인풋에
tabindex 속성을 지정해 봅시다.
Tab 키를 순차적으로 누르면
입력 포커스가 첫 번째 인풋에서 네 번째 인풋으로
이동한 다음, 페이지 상단의 링크로
이동하는 것을 볼 수 있습니다(지정된
tabindex 속성이 있는 요소가 더 이상 없기 때문입니다):
<input type="text" tabindex="3" placeholder="번호: 3">
<input type="text" tabindex="1" placeholder="번호: 1">
<input type="text" tabindex="2" placeholder="번호: 2">
<input type="text" tabindex="4" placeholder="번호: 4">
:
함께 보기
-
포커스 상태의 요소 스타일을 변경할 수 있는
의사 클래스
focus,
