[DOM_Element] JS - focus() 메서드 ★ - 포커스 주기/설정. (= focus메서드 = 포커스메서드)

1. focus() 예제 - a 요소에 포커스 주기
2. focus() 정의
3. focus() 구문
4. focus() 예제 - input 요소에 포커스 주기
5. focus() 예제 - 로드 시 바로 input 요소에 포커스 주기

focus() 예제 - a 요소에 포커스 주기

 

<style>

a:focus, a:active {

  color: green;

}

</style>

<a id="hz" href="https://homzzang.com">홈짱닷컴 바로가기</a>

<input type="button" onclick="focusOn()" value="focus ON">

<input type="button" onclick="focusOff()" value="focus OFF">

<script>

function focusOn() {

  document.getElementById("hz").focus();

}

function focusOff() {

  document.getElementById("hz").blur();

}

</script>

 

결과보기

focus() 정의

 

선택 요소가 포커스 가능 시, 포커스 주기.

※ 포커스 : 선택 요소 선택 효과.

 

---

 

1.  

• blur() 메서드 : 선택요소에서 포커스 제거. 
• focus 이벤트 : 선택요소가 포커스 될 때 지정 함수 실행.

 

2.

모든 브라우저 지원.

focus() 구문

 

HTMLElementObject.focus()

 

---

[매개변수]

 

없음.

 

---

[반환값]

 

없음.

 

focus() 예제 - input 요소에 포커스 주기

 

<input type="text" id="hz" value="홈짱닷컴 Homzzang.com">

<button type="button" onclick="getFocus()">focus 주기</button>

<button type="button" onclick="loseFocus()">focus 제거</button>

<script>

function getFocus() {

  document.getElementById("hz").focus();

}

function loseFocus() {

  document.getElementById("hz").blur();

}

</script>

 

결과보기

focus() 예제 - 로드 시 바로 input 요소에 포커스 주기

 

<input type="text" id="hz" value="홈짱닷컴 Homzzang.com">

<script>

window.onload = function() {

  document.getElementById("hz").focus();

};

</script>

 

결과보기