input태그 tab 순서 설정 : tabindex

by 조쉬 posted Mar 26, 2021
?

단축키

Prev이전 문서

Next다음 문서

ESC닫기

크게 작게 위로 아래로 댓글로 가기 인쇄

필자는 보통 로그인 창을 설계할때
 

아이디 : 로그인하기
비밀번호:


이런식으로 테이블 레이아웃을 설정했었다.

하지만 이런식으로 설계하고 아이디를 입력하고 [Tab] 버튼을 누르면 패스워드가 아닌 "로그인" 하기로 커서가 넘어간다.
그래서 이걸 잡아주려고 javascript로 focus 지정을 해주고 그랬었는데...

input태그의 속성중에 tabindex라는 것이 있더라.

<input type="text" name="a" tabindex="2">
<input type="text" name="b" tabindex="1">
<input type="text" name="c" tabindex="3">

b -> a -> c 순서로 커서가 이동된다.

이런식으로 써주면 현재 커서에서 [Tab]을 누를시에 자신의 tabindex 번호 다음 번호로 커서가 가게 된다.

별거 아닌 내용이지만,
여태껏 이것도 모르고 javascript로 focus 순서를 잡아준게 한심해서 글을 써본다 .ㅡ/.ㅡ;;