티스토리 뷰

HTML, CSS

Html에서 tabindex로 포커스 이동하기

travelpark 2022. 5. 24. 23:35
반응형

Html에서는 마우스 뿐만 아니라 키보드의 Tab를 이용해 포커스 이동이 가능합니다. 일반적으로 tabindex를 사용하지 않더라도 Html 마크업 순서에 맞게 Tab 이동이 가능합니다. 사용자와 상호작용이 가능한 태그들은 기본적으로 키보드로 포커스가 잡히게 되어 있는데 대표적으로 input, select, button, a 같은 태그를 예로 들 수 있고 이 태그들은 tab키나 shift+tab를 사용해 앞뒤로 포커스 이동을 자유롭게 할 수 있습니다.

 

lable, h, p, span 같은 태그들은 포커스 이동이 되지 않지만 tabindex를 사용해 가능하도록 만들 수 있습니다. 또 tabindex를 사용하면 포커스 이동을 제외하거나 해당 페이지에서 탭이동 시 가장 먼저 포커스 이동이 시작되게 만들어 줄 수도 있습니다.

 

<!DOCTYPE html>
<html>
<head>
<title>tabindex Demo</title>
</head>
<body>
<div>
    <h2>demo</h2>
    <a href="javascript:;" id="myTest">테스트</a>
    <label for="myTextField1" tabIndex="0">label1</label>
    <input type="text" id="myTextField1" value="Text field1">    
    <label for="myTextField2">label2</label>
    <input type="text" id="myTextField2" value="Text field2">
</div>
<div>
    <p>테스트1</p>
    <p tabIndex="0">테스트2</p>
    <span>test1</span>
    <span tabIndex="0">test2</span>
	 
    <input type="text" id="myTextField3" tabIndex="-1" value="Text field3">
</div>
<div>
    <button type="button" onclick="focusMethod()">button1</button>
    <button type="button" onclick="focusMethod()" tabIndex="1">button2</button>
</div>
<script> 
    function focusMethod(){
    	document.getElementById("myTest").focus();
    }
</script>
</body>
</html>

 

위 예제를 통해 tabindex의 사용법을 알아볼 수 있습니다. 먼저 tabindex="0" 을 사용하게 되면 포커스 되지 않는 태그도 포커스 되도록 수정할 수 있습니다. 반대로 tabindex="-1"를 사용하면 기존에 포커스 되던 태그들이 포커스 이동되지 않습니다. 마지막으로 tabindex="1"을 사용하면 탭 이동 시 가장 먼저 포커싱이 되게 됩니다.

 

위 예제에서 tabindex 값이 없다면 탭 이동 시 가장 먼저 포커싱되는 태그는 id="myTest" 라는 a태그여야 합니다. 하지만 실제로 테스트를 해보면 가장 먼저 이동하는 태그는 button2 라는 이름의 button태그 입니다. tabindex="1" 때문에 가장 마지막에 포커싱 되야할 태그지만 가장 먼저 포커싱이 됩니다.

 

label, p, span 태그의 경우 tabindex="0"이 선언되어 있는 id 값들은 포커스 이동이 가능하고 id="myTextField3"의 경우는 input 태그인데도 불구하고 포커스 이동이 되지 않습니다.

 

이렇게 자유자재로 tabindex를 사용해 포커스 이동을 제어할 수 있지만 과도하게 사용하게 되면 로직을 어지럽힐 수 있기 때문에 불가피한 경우가 아니면 사용하지 말아야겠습니다.

반응형

'HTML, CSS' 카테고리의 다른 글

UTF-8과 UTF-8(BOM)의 차이  (0) 2022.07.11
크롬으로 HTTP Header 확인하기  (0) 2019.12.17
HTML 첨자 사용 - sub 태그와 sup 태그 차이  (0) 2019.04.15
아이폰 브라우저에서 클릭을 두 번해야 동작하는 문제  (0) 2019.04.02
공유하기 링크
댓글
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함