[HTML] tab을 이용하여 로그인 버튼 누르기(feat. tabindex)

선결론!

div에 tabindex="0"을 추가하면 됨

 

<div>
    <div>Admin Login</div>
    <div>
        <span>ID</span>
        <input type="text" placeholder="입력해">
    </div>
    <div>
        <span>PASSWORD</span>
        <input type="password" placeholder="입력하라고">
    </div>
    <div type="submit">
        LOG IN
    </div>
</div>

 

위와 같은 간단한 로그인 페이지를 구현중이었다

id를 입력하고 tab을눌러 password로 이동하였다

password를 입력하고 자연스럽게 tab을 눌러 로그인 버튼으로 가길 바랬는데...?!

전혀 다른 웹 주소창의 '사이트 정보 보기' 버튼으로 포커스가 이동하였다..!

 

기본 로그인 창

 

갑자기 생긴 궁금증

왜 LOG IN 버튼으로 가지 않고 다른 곳으로 간걸까?

내가 type="button"을 선언하지 않고 div로 선언해서 그런걸까? 싶었다

---

문제 원인:

• div 요소는 기본적으로 포커스를 받을 수 없는 요소임.
• HTML 폼에서 input 필드 간에 Tab 키로 이동이 정상적으로 이루어지지만,
  div는 포커스를 받지 않으므로 Tab 키로 이동할 수 없습니다.

 

해결 방법:

1. tabindex 속성 추가

tabindex는 포커스 가능한 요소에 순서를 부여하는 속성^_^

• input 필드 => tab index가 0으로 설정,
  div와 같은 비포커스 요소에 tabindex를 추가하여 포커스를 받을 수 있게 만들자

2. tabindex의 값 설정

• tabindex="0": 기본적인 포커스를 받을 수 있는 요소로 설정. 이는 DOM의 순서대로 포커스를 받을 수 있게 함
• tabindex="-1": 이 요소는 Tab 순서에서 제외ㅋ
• tabindex="1", tabindex="2", ...: 특정 순서대로 포커스를 이동시키고 싶다면, 숫자를 증가시켜 사용

결론:

• div 요소에는 기본적으로 포커스가 갈 수 없기 때문에 Tab 순서에 포함되지 않음
  따라서 tabindex="0"을 div에 추가하여 Tab 키로 이동할 수 있게 해야 함
• 또한, Tab 키 순서는 tabindex 속성에 의해 제어되므로,
  원하는 순서대로 이동하게 하려면 각 요소에 적절한 tabindex 값을 설정해야 함

<div class="btn-wrapper" type="submit" tabindex="0">
    LOG IN
</div>

출처 https://www.youtube.com/watch?v=Pe0Ce1WtnUM의 썸네일