javascript .focus() not working 포커스 함수 동작 하지 않는 이유

javascript .focus() not working 포커스 함수 동작 하지 않는 이유

 

javascript의 focus 함수는 DOM 내 요소에 포커스를 이동할 때 사용합니다.

 

동적으로 추가된 요소에 포커스를 이동하는 경우 요소가 추가되기 전에 포커스를 준 경우 함수가 동작하지 않습니다.

이럴경우에는 setTimeout 함수를 주어 delay를 주면 동작합니다.

 

setTimeout(function(){
	document.getElementById("newElement").focus();
},100);

 

하지만 포커스를 주기 전에 console로 확인하여 객체가 있음에도 불구하고 focus 함수가 동작하지 않을 때가 있습니다.

table 요소의 tr (행) 에 포커스를 줄 때가 그런데요.

이 때는 tabindex attribute를 추가해주어야 합니다.

 

tabindex는 tab 키를 눌렀을 때 이동하는 순서를 지정하는 attribute 입니다.

보통 클릭 가능한 요소에 주는 속성이지만, table 요소의 tr의 경우 tabindex 속성이 없으면 포커스 기능이 정상동작하지 않습니다.

 

<table>
	<tbody id="tbody">
		<tr><td>1</td></tr>
		<tr><td>2</td></tr>
		<tr><td>3</td></tr>
		<tr><td>4</td></tr>
		<tr><td>5</td></tr>
		<tr><td>6</td></tr>
		<tr><td>7</td></tr>
		<tr><td>8</td></tr>
		<tr><td>9</td></tr>
		<tr tabIndex=0><td>10</td></tr>
	</tbody>
</table>

 

예를 들어 위와 같은 테이블이 있을 경우 tr 0번째와 tabindex를 준 9번째 tr에 포커스를 준 다음 

활성화된 요소를 확인해보겠습니다.

 

<script>
document.getElementById("tbody").children[0].focus();
console.log(document.activeElement);
document.getElementById("tbody").children[9].focus();
console.log(document.activeElement);
</script>

 

첫 번째 console의 결과는 body 입니다. tabindex가 없으니 포커스가 가지 않아 바디가 활성화 요소가 되는 것이죠.

두 번째 console의 결과는 <tr tabindex=9>...</tr> 이 찍히게 됩니다. 포커스 이벤트가 정상 동작하게 되죠.

 

tabindex 속성은 접근성 검사를 받을 때도 체크되는 항목이니 table요소를 사용할 때는 꼭 추가해주도록 합시다.