[HTML] tabIndex 탭 순서바꾸기, 순서 지정해서 바꾸기

안녕하세요, 오늘은 HTML에서 tabindex 속성을 이용하여 탭 순서 변경 및 포커스를 제어하는 방법에 대해서 알아보도록 하겠습니다. 회원가입을 할 때나, 어떠한 정보를 순서대로 입력 시 빠른 입력을 위해 Tab 버튼을 자주 사용하는데요, 순차적으로 이동하는 tab의 순서나 방향을 바꾸고 싶을 땐 어떻게 해야 할까요??

 

1. 순차적 초점 이동의 예제

0

네이버 메인 페이지의 카테고리 영역을 보시면 탭으로 이동시 오른쪽으로 한 칸씩 포커스가 이동하는 것을 볼 수 있습니다. 반대로 [ Shift + Tab ]을 누르면 왼쪽 방향으로 한 칸씩 포커스가 이동하죠.

2. 탭의 순서 바꾸기

일반적인 Tab 이동의 흐름은 위와 같이[이름] -> [이메일] -> [성별] -> [핸드폰] 순으로 포커스가 이동합니다.

<table border=1>
  <tr>
    <td>이름</td>
    <td><input type="text"/></td>
    <td>이메일</td>
    <td><input type="text"/></td>
  </tr>
  <tr>
    <td>성별</td>
    <td><input type="text"/></td>
    <td>핸드폰</td>
    <td><input type="text"/></td>
  </tr>
</table>

See the Pen Untitled by seo (@seungbly) on CodePen.

 

 

[이름] -> [성별] -> [이메일] -> [핸드폰] 순서로 탭 이동을 시키려면 어떻게 해야 할까요?? 방법은 간단합니다. 각각의 input에 tabindex 번호를 넣어주시면 됩니다.

<table border=1>
  <tr>
    <td>이름</td>
    <td><input type="text" tabindex="1"/></td>
    <td>이메일</td>
    <td><input type="text" tabindex="2"/></td>
  </tr>
  <tr>
    <td>성별</td>
    <td><input type="text" tabindex="3"/></td>
    <td>핸드폰</td>
    <td><input type="text" tabindex="4"/></td>
  </tr>
</table>

See the Pen Untitled by seo (@seungbly) on CodePen.

 

마지막으로 탭 이동 시 [성별]을 건너뛰고 싶다면 어떻게 처리해야 할까요?? tabindex의 값에 "-1"을 넣어주세요.

<table border="1">
  <tr>
    <td>이름</td>
    <td><input type="text"/></td>
    <td>이메일</td>
    <td><input type="text"/></td>
  </tr>
  <tr>
    <td>성별</td>
    <td><input type="text" tabindex="-1"/></td>
    <td>핸드폰</td>
    <td><input type="text"/></td>
  </tr>
</table>

See the Pen Untitled by seo (@seungbly) on CodePen.