HTML DOM의 input radio autofocus 속성은 HTML <input> 요소의 autofocus 특성(attribute)과 연결된 기능입니다. 이 속성을 활용하면 웹 페이지가 로드될 때 해당 라디오 버튼이 자동으로 포커스(초점)를 받도록 설정하거나, 현재 자동 포커스가 적용되어 있는지 여부를 확인할 수 있습니다.
문법(Syntax)
autofocus 속성을 설정하는 기본 문법은 다음과 같습니다.
radioObject.autofocus = true|false
true는 라디오 버튼이 자동으로 포커스를 받아야 함을 의미하고, false는 그렇지 않음을 나타냅니다. 기본값은 false로 설정되어 있습니다.
예제
Input Radio autofocus 속성의 실제 동작을 확인할 수 있는 예제입니다.
<!DOCTYPE html>
<html>
<body>
<h1>Input Radio autofocus 속성 예제</h1>
<form>
RADIO: <input type="radio" id="rad1" name="BTN" autofocus>
</form>
<br><br>
<button type="button" onclick="FocusVal()">포커스 확인</button>
<p id="Sample"></p>
<script>
function FocusVal() {
var R = document.getElementById("rad1").autofocus;
document.getElementById("Sample").innerHTML = "라디오 버튼의 autofocus 속성 값: " + R;
}
</script>
</body>
</html>
실행 결과
위 코드를 실행하면 라디오 버튼과 '포커스 확인' 버튼이 화면에 표시됩니다. '포커스 확인' 버튼을 클릭하면 다음과 같은 결과가 출력됩니다.
라디오 버튼의 autofocus 속성 값: true
코드 상세 설명
위 예제에서 수행한 작업을 단계별로 살펴보겠습니다.
1. 라디오 버튼 생성
type="radio", id="rad1", name="BTN"으로 지정된 라디오 버튼을 만들고 autofocus 특성을 활성화(true)했습니다. 덕분에 페이지가 열리는 순간 이 버튼에 자동으로 초점이 맞춰집니다.
<input type="radio" id="rad1" name="BTN" autofocus>
2. 확인 버튼 생성
사용자가 클릭하면 FocusVal() 함수를 실행하는 '포커스 확인' 버튼을 만들었습니다.
<button type="button" onclick="FocusVal()">포커스 확인</button>
3. FocusVal() 함수의 동작 원리
FocusVal() 함수는 getElementById() 메서드를 사용해 라디오 타입의 input 요소를 가져온 뒤, 해당 요소의 autofocus 속성 값을 읽어옵니다. autofocus 속성은 라디오 버튼의 autofocus 특성 값에 따라 true 또는 false를 반환합니다. 이 반환 값은 변수 R에 저장되며, innerHTML 속성을 통해 id가 "Sample"인 문단에 결과로 표시됩니다.
function FocusVal() {
var R = document.getElementById("rad1").autofocus;
document.getElementById("Sample").innerHTML = "라디오 버튼의 autofocus 속성 값: " + R;
}참고 사항
autofocus 특성은 하나의 페이지에서 여러 요소에 중복해서 사용하지 않는 것이 좋습니다. 브라우저마다 동작 방식이 다를 수 있으며, 일반적으로 가장 먼저 선언된 요소만 포커스를 받습니다. 또한 autofocus는 페이지가 처음 로드될 때만 적용되므로, 동적으로 포커스를 이동시키려면 JavaScript의 focus() 메서드를 사용하는 것이 더 안전합니다.