[JavaScript] html 요소에 focus 주는 방법

728x90

목 차

• 1. focus 메서드란?
• 2. 문법
• 3. 주요 특징
• 3-1. 포커스 가능한 요소에만 동작
• 3-2. 자동 스크롤
• 3-3. 유효성 검사와 함께 작동
• 4. 예제
• 4-1. 입력 필드에 포커스 설정
• 4-2. 포커스 자동 설정
• 4-3. preventScroll 사용
• 4-4. tabindex로 포커스 설정
• 5. 주의 사항

반응형

 

1. focus 메서드란?

• JavaScript의 focus 메서드는 특정 HTML 요소에 프로그래밍적으로 포커스를 설정하는 데 사용됩니다. 일반적으로 입력 필드(예: <input>, <textarea> 등)나 버튼과 같은 요소에서 활용되며, 사용자 입력이나 접근성을 개선하는 데 유용합니다.

 

---

 

2. 문법

element.focus(options);

• element: 포커스를 설정하려는 HTML 요소.
• options (선택 사항): 포커스 동작을 제어하기 위한 객체
  • preventScroll: true로 설정하면 포커스 설정 시 자동으로 스크롤되지 않음.

 

---

 

3. 주요 특징

3-1. 포커스 가능한 요소에만 동작

 

• 기본적으로 <input>, <textarea>, <button>, <select> 등이 포커스를 받을 수 있습니다.
• 다른 요소는 tabindex 속성을 설정해야 포커스가 가능합니다.

<div tabindex="0">이것도 포커스 가능</div>

 

3-2. 자동 스크롤

• 요소가 현재 화면에 보이지 않으면 focus() 호출 시 화면이 해당 요소로 스크롤됩니다.
• 이 동작을 막으려면 options 객체에서 preventScroll을 사용합니다.

 

3-3. 유효성 검사와 함께 작동

• 브라우저는 focus()를 호출한 요소가 disabled 상태이거나 visibility: hidden인 경우 무시합니다.

 

---

 

4. 예제

4-1. 입력 필드에 포커스 설정

<input type="text" id="name" placeholder="이름을 입력하세요" />
<button id="focusBtn">포커스 설정</button>

<script>
  const input = document.getElementById('name');
  const button = document.getElementById('focusBtn');

  button.addEventListener('click', () => {
    input.focus();
  });
</script>

 

4-2. 포커스 자동 설정

• 페이지 로드 시 특정 입력 필드에 포커스를 설정합니다.

<input type="text" id="search" placeholder="검색어를 입력하세요" />

<script>
  window.onload = () => {
    document.getElementById('search').focus();
  };
</script>

 

4-3. preventScroll 사용

• 포커스 설정 시 화면이 스크롤되지 않도록 설정합니다.

<div style="height: 2000px;"></div>
<input type="text" id="input" value="포커스될 요소" />

<script>
  const input = document.getElementById('input');
  input.focus({ preventScroll: true }); // 화면이 스크롤되지 않음
</script>

 

4-4. tabindex로 포커스 설정

• 포커스가 기본적으로 불가능한 요소에 tabindex를 추가하여 포커스 가능하게 만듭니다.

<div id="focusable" tabindex="0">이 요소는 포커스를 받을 수 있습니다!</div>
<button id="setFocus">포커스 설정</button>

<script>
  const div = document.getElementById('focusable');
  const button = document.getElementById('setFocus');

  button.addEventListener('click', () => {
    div.focus();
  });
</script>

 

---

 

5. 주의 사항

1) 비활성화된 요소에 도작하지 않음.

• disabled 속성이 있는 요소에 대해 focus()를 호출해도 효과가 없습니다.

<input type="text" id="input" disabled />
<script>
  document.getElementById('input').focus(); // 동작하지 않음
</script>

 

2) 숨겨진 요소에 동작하지 않음.

• 요소가 display: none이거나 visibility: hidden인 경우 focus()가 동작하지 않습니다.

 

3) 스크롤과 포커스

• 포커스를 설정하면 요소가 보이도록 자동 스크롤되므로 preventScroll 옵션을 활용하세요.