Web/WEB기본

[html] HTML 페이지 로딩시 <input>에 커서 자동으로 가기

saltdoll 2020. 5. 14. 07:54
반응형

프로그램을 개발하다보면,

사용자의 입력을 받는 곳에 커서를 처음 위치해준다는 것은 작은 배려이지만,

많은 부분 사용자에게 마우스 커서를 한번 찍지 않아도 되는 이득을 줄 수 있습니다.

페이지 로딩시, 자동 커서 이동

 

<input>의 autofocus 속성을 알기 전에는 javascript를 이용해서 커서를 이동시켰답니다.

 

 

 

[ 옛날 javascript 소스를 이용한 Input박스에 커서 이동하기 ]

<script>
var goFocus = function() {
	$('#card_num').focus();
}
var goInfinite = function() {
	setInterval(function(){ goFocus(); },3000);/* 3 Sec interval */
}
</script>
...
<body onload="goFocus();goInfinite();">
<input type="text" id="card_num" />

 

결론적으로 해당 방법은 믿을만 하지만, 별로 필요 없는 코딩 낭비(?) 였습니다.

해결 방법은 autofocue 속성을 이용하는게 편리하고 유용합니다.

 

[ 쉬운 해결법 ]

<input type="text" id="card_num" autofocus />

페이지가 로딩되는 순간 해당 Input 박스로 커서가 이동됩니다.

 

Browser Support

  Chrome IE firefox safari opera
autofocus 5.0 11.0 4.0 5.0 9.6

 

참고: https://www.w3schools.com/tags/att_input_autofocus.asp

 

반응형