tabindex 문제점

오늘 제가 쓰는 글은 tabindex 라는 html 속성에 대해 말하려고 합니다.

tabindex는 잘 쓰지 않는 속성인데요.

a 태그

area 태그

button 태그

input 태그

object 태그

select 태그

textarea 태그

위 태그에 tabindex="1" 이런 형태로 속성을 주어서 사용하게 됩니다.

속성 이름대로 tab을 할 때 순서를 개발자가 정할 수 있게 되는것이지요.

문제는 의도는 정말 좋습니다.

그러나 tabindex가 있는 경우 position과 함께 input 태그에 입력을 할 수가 없게 됩니다.

저도 잘 몰랐는데 jquery modal을 띄워놓고

제가 직접 만든 modal을 띄워 놓았습니다. 제가 만든 modal에는 input 태그가 있는데

z-index를 이용하여 저의 modal을 가장 높게 주어도 input에 입력을 할 수가 없었습니다.

jquery modal의 어떤 소스나 css 또는 html 때문에 안된다는 추측은 했지만

정확한 이유를 찾을수가 없었는데, 정말 문득 tabindex를 보고 jquery modal의 tabindex 속성을 제거하고 해보니 정상적으로 

input 태그에 입력이 되네요.