JavaScript에서 `` 요소에 포커스를 맞추려면 어떻게 해야 합니까?-JS 튜토리얼-php.cn

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

Mary-Kate Olsen

풀어 주다： 2024-11-05 11:04:02

원래의

923명이 탐색했습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천：php.cn

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

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

저자별 최신 기사

에서 2024-04-29 11:01:01

2060

Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?

에서 2024-04-23 00:22:19

2215