키보드 포커스
키보드로 포커가 잡히는 요소는 대표적으로 <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>
'자율 학습 > 학습' 카테고리의 다른 글
| CKEditor 에 keydown 이벤트 주는 방법 (0) | 2022.09.18 |
|---|---|
| CKEditor 필요 없는 버튼 빼는 방법 - removeButtons (0) | 2022.09.17 |
| [JavaScript] 등록 페이지 필터 - 사진 첨부 안 했을 때, div에 focus 주는 방법 (0) | 2022.09.16 |
| [JavaScript] document.referrer 이전 페이지에 대한 정보 (로그인 후 돌아가기) (0) | 2022.09.16 |
| [JavaScript] keyup, keydown, keypress 차이 (0) | 2022.09.15 |