[html] tabindex - tab 눌러서 div로 만든 로그인 버튼으로 이동하기

키보드 포커스

 

키보드로 포커가 잡히는 요소는 대표적으로 <input>, <select>, <button>, <a> 태그가 있다.

만약 상호작용하지 않는 <div>나 <span>에도 키보드 포커스가 잡히게 하고 싶다면 tabindex를 이용하면 가능해진다.

 

 

 

 

tabindex

 

1. 키보드 포커스 잡히게 하고 싶을 때

tabindex = "0"

 

보통 버튼은 인풋 태그나 버튼 태그로 만드는데 div 태그로 로그인 버튼을 만든 경우 간단하게 tabindex 속성을 0으로 만들어주면 된다.

 

 

2. 키보드 포커스 안 잡히게 하고 싶을 때

tabindex = "-1"

 

 

3. 키보드 포커스 잡히는 순서를 지정하고 싶을 때

tabindex = 양수

양수 순서대로 포커스가 이동한다.

 

 

출처: https://www.daleseo.com/html-tabindex/

---

 

<div class = "btn_wrap">
	<div class="login_btn" tabindex="0">로그인</div>
</div>