HTML DOM의 Input Submit autofocus 속성은 HTML <input> 요소의 autofocus 어트리뷰트와 연결된 속성입니다. 이 속성을 사용하면 페이지가 로드될 때 제출(submit) 버튼이 자동으로 포커스를 받아야 하는지 여부를 설정하거나, 현재 설정된 값을 가져올 수 있습니다.
문법(Syntax)
autofocus 속성을 설정하는 문법은 다음과 같습니다.
submitObject.autofocus = true|false
true는 제출 버튼이 포커스를 받아야 함을 의미하고, false는 그 반대를 의미합니다. 기본값은 false로 설정되어 있습니다.
예제(Example)
다음은 Input Submit autofocus 속성을 활용한 예제 코드입니다.
<!DOCTYPE html>
<html>
<body>
<h1>Submit Autofocus 속성</h1>
<form action="/Sample_page.php" style="border:solid 2px green;padding:2px">
UserName: <input type="text" id="USR"><br>
Location: <input type="text" id="Loc"><br><br>
<input type="submit" id="SUBMIT1" autofocus>
</form>
<p>아래 버튼을 클릭하면 제출 버튼의 autofocus 속성 값을 확인할 수 있습니다.</p>
<button type="button" onclick="FocusVal()">CHECK</button>
<p id="Sample"></p>
<script>
function FocusVal(){
var f = document.getElementById("SUBMIT1").autofocus;
document.getElementById("Sample").innerHTML = "제출 버튼의 autofocus 속성 값: " + f;
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
CHECK 버튼을 클릭하면 아래와 같이 autofocus 속성 값이 표시됩니다.
참고 사항
autofocus 속성은 Chrome, Edge, Firefox, Safari, Opera 등 주요 최신 브라우저에서 모두 지원됩니다. 또한 한 페이지 내에서 여러 요소에 autofocus를 지정하면 첫 번째 요소만 포커스를 받게 되므로, 의도한 대로 동작하지 않을 수 있다는 점에 유의해야 합니다.