HTML DOM focus() 메서드

<시간/>

HTML DOM focus() 메서드는 HTML 요소에 포커스를 주는 데 사용됩니다. 모든 HTML 요소에 포커스를 적용할 수 없습니다. 예:

태그에 포커스를 둘 수 없습니다. 요소에서 포커스를 제거하려면 blur() 메서드를 사용합니다.

구문

다음은 구문입니다 -

HTMLElementObject.focus()

예시

focus() 메서드의 예를 살펴보겠습니다. -

<!DOCTYPE html>
<html>
<head>
<style>
   input[type=text]:focus, p:active {
      color: blue;
      font-size:35px;
      background-color:lightpink;
      border:2px solid blue;
   }
   input[type=text]{
      color:black;
      font-size:20px;
   }
</style>
<script>
   function enableFocus() {
      document.getElementById("USR1").focus();
   }
   function disableFocus() {
      document.getElementById("USR1").blur();
   }
</script>
</head>
<body>
<h1>focus() method example</h1>
<label>USERNAME :<input id="USR1" type="text" size=5 maxlength=10></label>
<br><br>
<input type="button" onclick="enableFocus()" value="FOCUS">
<input type="button" onclick="disableFocus()" value="BLUR">
</body>
</html>

출력

이것은 다음과 같은 출력을 생성합니다 -

HTML DOM focus() 메서드

FOCUS 버튼 클릭 시 -

HTML DOM focus() 메서드

BLUR 버튼 클릭 시 -

HTML DOM focus() 메서드

위의 예에서 -

먼저 id가 "USR1"이고 size 및 maxlength 속성 값이 각각 5 및 10인 텍스트 상자를 만들었습니다.

<label>USERNAME :<input id="USR1" type="text" size=5 maxlength=10></label>

텍스트 상자에 포커스가 있을 때와 활성화되어 있지 않을 때 두 가지 다른 CSS 스타일을 만들었습니다. -

input[type=text]:focus, input[type=text]:active {
   color: blue;
   font-size:35px;
   background-color:lightpink;
   border:2px solid blue;
}
input[type=text]{
   color:black;
   font-size:20px;
}

그런 다음 사용자가 클릭할 때 enableFocus() 및 disableFocus() 메서드를 각각 실행하는 두 개의 버튼 FOCUS 및 BLUR을 만들었습니다.

<input type="button" onclick="enableFocus()" value="FOCUS">
<input type="button" onclick="disableFocus()" value="BLUR">

enableFocus() 메서드는 getElementById() 메서드를 사용하여 "텍스트" 유형의 입력 요소를 가져오고 해당 focus() 메서드가 텍스트 상자에 :focus 스타일을 적용하는 텍스트 상자에 포커스를 설정할 수 있도록 합니다. disableFocus() 메서드는 id가 "USR1"인 입력 요소를 가져오고 여기에 일반 CSS 스타일을 적용하는 텍스트 상자에서 포커스를 제거하는 blur() 메서드를 호출합니다. 즉, 기본 스타일로 돌아갑니다. −

function enableFocus() {
   document.getElementById("USR1").focus();
}
function disableFocus() {
   document.getElementById("USR1").blur();
}