• 회원가입
  • 로그인

[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>

 

결과보기


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012