집 >웹 프론트엔드 >JS 튜토리얼 >JavaScript에서 `` 요소에 포커스를 맞추려면 어떻게 해야 합니까?

JavaScript에서 `` 요소에 포커스를 맞추려면 어떻게 해야 합니까?

Mary-Kate Olsen원래의: 2024-11-05 11:04:02919검색

How Can I Make a `` Element Focusable in JavaScript?

에 포커스 액세스 JavaScript를 통한 요소

특정 요소(예: 입력 및 버튼)의 고유한 포커스 가능성에도 불구하고 기본적으로

JavaScript focus() 함수를 사용하는 요소.

TabIndex 지정

에 초점을 맞추려면 tabindex 속성을 지정해야 합니다. 페이지의 탭 순서 내 위치입니다. tabindex를 0으로 지정하면 사용자가 또는 JavaScript를 통해 요소에 초점을 맞출 수 있습니다.

<code class="html"><div id="tries" tabindex="0">You have 3 tries left</div></code>

JavaScript로 초점 설정

tabindex를 지정한 후 요소는 focus() 함수를 사용하여 프로그래밍 방식으로 초점을 맞출 수 있습니다:

<code class="javascript">document.getElementById('tries').focus();</code>

고려사항

tabindex -1은 요소가 JavaScript를 통해서만 초점을 맞출 수 있도록 합니다. 사용자 상호 작용.
포커스 가능 요소는 포커스 시 키보드 이벤트 및 스타일 지정(예: 배경색 변경)을 받을 수 있습니다.
접근성 문제로 인해 사용자 포커스 가능하지 않아야 하는 요소에는 tabindex를 할당하지 마세요.

예

다음 예는 초점 할당과 시각적 신호를 보여줍니다.

<code class="html"><style>
div:focus {
    background-color: Aqua;
}
</style>

<div>Element X (not focusable)</div>
<div tabindex="0">Element Y (user or script focusable)</div>
<div tabindex="-1" id="scripted">Element Z (script-only focusable)</div>

<div id="test" onclick="document.getElementById('scripted').focus();">Set Focus To Element Z</div></code>

위 내용은 JavaScript에서 `` 요소에 포커스를 맞추려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript for using Attribute function position background

성명：

이전 기사：if 문에서는 "0"이 True로 평가되지만 비교에서는 False로 평가되는 이유는 무엇입니까?다음 기사：if 문에서는 "0"이 True로 평가되지만 비교에서는 False로 평가되는 이유는 무엇입니까?