[JS] 포커스(Focus)란 무엇인가?

포커스(Focus)는 HTML 요소가 현재 키보드 입력을 받을 준비가 된 상태를 의미한다. 예를 들어, 텍스트 입력 창에 커서가 깜빡일 때나 버튼이 키보드로 선택되었을 때를 생각하면 된다.

 

 

 

---

언제 포커스가 발생할까?

• 사용자가 마우스로 클릭했을 때

• Tab 키를 사용해 입력 필드나 버튼 등 포커스를 받을 수 있는 요소로 이동했을 때

• JavaScript에서 .focus() 메서드를 사용해 강제로 포커스를 부여했을 때

 

 

 

---

포커스가 가능한 요소

일반적으로 다음과 같은 HTML 요소들이 포커스를 받을 수 있다.

 

• <input>: 텍스트 입력, 체크박스, 라디오 버튼 등

• <textarea>: 여러 줄 입력 필드

• <button>: 버튼

• <select>: 드롭다운 리스트

• tabindex 속성이 있는 요소: 기본적으로 포커스를 받을 수 없는 요소도 tabindex를 부여하면 포커스를 받을 수 있다.

<div tabindex="0">포커스를 받을 수 있는 div</div>

 

 

---

포커스 관련 이벤트

JavaScript에서는 포커스와 관련된 이벤트가 여러 가지 있다.

 

이벤트란 무엇인가?

[JS] 이벤트(Event) 완벽 정리 + Event Type과 Event Object

 

1. focus

• 설명: 요소가 포커스를 받을 때 발생

• 버블링 여부: 버블링되지 않음

• 사용 예시:

const input = document.querySelector('input');
input.addEventListener('focus', function() {
    console.log('입력 필드에 포커스가 갔습니다.');
});

 

버블링이란 무엇인가?

[JS] 캡처링(Capturing)과 버블링(Bubbling)

 

2. blur

• 설명: 요소가 포커스를 잃을 때 발생

• 버블링 여부: 버블링되지 않음

• 사용 예시:

input.addEventListener('blur', function() {
    console.log('입력 필드에서 포커스가 빠졌습니다.');
});

 

3. focusin과 focusout

• focusin: 하위 요소가 포커스를 받을 때 발생 (버블링됨)

• focusout: 하위 요소가 포커스를 잃을 때 발생 (버블링됨)

• focus와 blur는 버블링되지 않지만, focusin과 focusout은 버블링된다.

• 사용 예시:

const form = document.querySelector('form');
form.addEventListener('focusin', function() {
    console.log('폼 내부에서 포커스가 이동했습니다.');
});
form.addEventListener('focusout', function() {
    console.log('폼 내부에서 포커스가 나갔습니다.');
});

 

 

 

---

JavaScript로 포커스 제어하기

JavaScript에서는 다음과 같은 메서드로 포커스를 제어할 수 있다.

 

1. .focus()

• 요소에 포커스를 강제로 부여한다.

• 예시:

const input = document.querySelector('input');
input.focus();  // 해당 입력 필드에 포커스를 줌

 

2. .blur()

• 요소에서 포커스를 제거한다.

• 예시:

input.blur();  // 입력 필드에서 포커스를 뺌

 

 

 

---

예시 코드

다음은 포커스를 받으면 배경색이 바뀌고, 포커스를 잃으면 원래대로 돌아오는 예시다.

<input type="text" placeholder="이곳에 입력하세요">

<script>
    const input = document.querySelector('input');
    
    input.addEventListener('focus', function() {
        input.style.backgroundColor = 'lightyellow';
    });
    
    input.addEventListener('blur', function() {
        input.style.backgroundColor = '';
    });
</script>

 

• 사용자가 입력 필드를 클릭하거나 Tab 키로 이동하면 배경색이 노란색으로 변한다.

• 포커스를 잃으면 배경색이 원래 색으로 돌아온다.