반응형
프로그램을 개발하다보면,
사용자의 입력을 받는 곳에 커서를 처음 위치해준다는 것은 작은 배려이지만,
많은 부분 사용자에게 마우스 커서를 한번 찍지 않아도 되는 이득을 줄 수 있습니다.
<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
반응형
'Web > WEB기본' 카테고리의 다른 글
| [HTML5] video / audio onloadeddata 로딩완료 이벤트 - 비디오 자동 재생하기 (0) | 2022.01.07 |
|---|---|
| [CSS] display: 속성으로 여러개의 li 한줄로 표시하기(메뉴 버튼 처럼) (0) | 2021.02.19 |
| [CSS] <ul>과 <ol>안의 <li>앞에 나오는 점과 숫자 표시 없애기 (0) | 2020.06.19 |
| HTML code, HTML Symbols 특수문자, 화폐표시 웹 랜더링 html Code값들 (0) | 2020.02.25 |
| HTTP "Basic" URL Param 인증 방식 쉽게하기 + wget에서 인증하기 (0) | 2020.01.17 |
| [CSS] CSS 를 사용한 프린트시 페이지 나눔 처리 방법 page-break-after: always; (0) | 2019.10.30 |
| [CSS] 부모 객체의 색상을 그대로 사용하는 color:inherit; 속성값 (0) | 2019.10.03 |
| [html5] input 객체의 type별 형태 (tel 모바일 숫자 Kepad로 변경) (0) | 2019.09.24 |
도움이 되셨다면 하트모양의 "♡ 공감"을 눌러주시면 큰 격려가 됩니다.
(로그인하지 않으셔도 가능)
(로그인하지 않으셔도 가능)