tabindexHTML에서 사용되는 속성 은 무엇입니까 ?
답변
tabindex다음 두 가지를 담당 하는 전역 속성입니다 .
- “포커스 가능”요소의 순서를 설정하고
- 이 요소는 “포커스”합니다 .
내 마음에 두 번째 것은 첫 번째 것보다 훨씬 중요합니다. 기본적으로 초점을 맞출 수있는 요소는 거의 없습니다 (예 : <a> 및 양식 컨트롤). 개발자는 초점이 맞지 않는 요소 (<div>, <span> 등)에 JavaScript 이벤트 핸들러 (예 : ‘onclick’)를 추가하고 마우스 이벤트뿐만 아니라 키보드 이벤트에도 인터페이스를 반응시키는 방법을 추가합니다. (예 : ‘onkeypress’)는 그러한 요소를 집중 가능하게 만드는 것입니다. 마지막으로 순서를 설정하지 않고 요소 tabindex="0"를 모든 해당 요소에 집중적으로 사용하려면 다음 을 수행하십시오.
<div tabindex="0"></div>또한 탭 키를 통해 초점을 맞추지 않으려면을 사용하십시오 tabindex="-1". 예를 들어, 탭 키를 사용하여 트래버스하는 동안 아래 링크는 초점을 맞추지 않습니다.
<a href="#" tabindex="-1">Tab key cannot reach here!</a>답변
사용자가 탭 버튼을 누르면 아래 예에 표시된대로 1, 2 및 3의 순서로 양식이 표시됩니다.
예를 들면 다음과 같습니다.
Name: <input name="name" tabindex="1" />
Age: <input name="age" tabindex="3" />
Email: <input name="email" tabindex="2" />답변
그만큼 tabindex사용자가 Tab 키를 사용하여 페이지를 탐색 할 때 따르는 순서를 정의하는 데 사용됩니다. 기본적으로 자연 탭 순서는 마크 업의 소스 순서와 일치합니다.
tabindex content 속성을 사용하면 작성자가 요소의 초점을 맞출 수 있는지 여부, 순차적 초점 탐색을 사용하여 도달 할 수 있는지 여부 및 순차적 초점 탐색을 위해 요소의 상대적 순서를 제어 할 수 있습니다. “탭 인덱스”라는 이름은 포커스 가능한 요소를 탐색하기 위해 “탭”키의 일반적인 사용에서 비롯됩니다. “테이 빙”이라는 용어는 순차적 인 포커스 네비게이션을 사용하여 도달 할 수있는 포커스 가능한 요소를 통해 전진하는 것을 의미한다.
W3C 권장 사항 : HTML5
7.4.1 절 순차적 초점 탐색 및 tabindex 속성
tabindex0에서 시작 또는 임의의 양의 정수 증분 상향. 이전 버전의 Mozilla 및 IE에서는 tabindex가 1에서 시작하여 2로 이동하고 2 이후에만 0으로 이동 한 다음 3으로 설정되므로 0 값을 피하는 것이 일반적 tabindex입니다 32767. 최대 정수 값은 입니다 . 요소가 동일 tabindex하면 tabindex는 마크 업의 소스 순서와 일치합니다. 음수 값은 요소를 탭 색인에서 제거하므로 초점이 맞지 않습니다.
요소가 할당되어있는 경우 tabindex의 -1이 요소를 제거하며 포커스 결코하지만 초점은 프로그램 사용 요소에 부여 할 수 있습니다 element.focus().
tabindex값이 없거나 비어있는 값으로 속성 을 지정하면 무시됩니다.
이 disabled있는 요소에 속성이 설정된 경우 해당 tabindex요소는 무시됩니다.
a tabindex가 코드의 나머지 부분과 관련이있는 곳과 관계없이 페이지의 아무 곳에 나 설정되어 있으면 (바닥 글, 내용 영역에있을 수 있음) 정의 된 tabindex경우 탭 순서가 요소에서 시작됩니다 이 tabindex값은 0보다 높은 가장 낮은 값 으로 명시 적으로 지정 됩니다. 그런 다음 정의 된 요소를 순환하고 명시적인 tabindex요소를 탭한 후에 만 문서의 시작 부분으로 돌아가 자연 탭 순서를 따릅니다.
HTML4 스펙에서는 다음 요소 만 tabindex 속성을 지원합니다. 닻, 지역, 단추, 입력, 목적, 고르다, 텍스트 영역. 그러나 접근성을 염두에두고 HTML5 사양을 사용하면 모든 요소를 지정할 수 있습니다 tabindex.
–
예를 들어
<ul tabindex="-1">
<li tabindex="1"></li>
<li tabindex="2"></li>
<li tabindex="3"></li>
</ul>와 같다
<ul tabindex="-1">
<li tabindex="1"></li>
<li tabindex="1"></li>
<li tabindex="1"></li>
</ul>그들이 모두 할당되었다는 사실에 관계없이 tabindex="1", 그들은 여전히 같은 순서를 따르고, 첫 번째 순서는 첫 번째 순서이고, 마지막 순서는 마지막 순서입니다. 이것도 마찬가지입니다.
<div>
<a></a>
<a></a>
<a></a>
</div>기본 동작 인 경우 tabIndex를 명시 적으로 정의 할 필요가 없기 때문입니다. div기본적으로 A 는 초점을 맞출 수 없으며 anchor태그는 초점을 맞출 수 없습니다 .
답변
태빙 순서 제어 ( tab페이지 내에서 키를 초점 이동) 제어
참조 : http://www.w3.org/TR/html401/interact/forms.html#h-17.11.1
답변
설정 한 값에 따라 키보드 포커스가 웹 사이트의 요소 사이에서 이동하는 순서가 결정됩니다.
다음 예에서 탭을 처음 누르면 커서가 #foo, #awesome, #bar로 이동합니다.
<input id="foo" tabindex="1" />
<input id="bar" tabindex="3" />
<input id="awesome" tabindex="2" />탭 색인을 정의하지 않은 경우 키보드 포커스는 HTML 문서에 정의 된 순서대로 페이지의 HTML 태그를 따릅니다.
tabindex를 지정한 횟수보다 많이 탭하면 tabindex가없는 것처럼 (예 : HTML 태그가 나타나는 순서대로) 포커스가 이동합니다.
답변
기본 양식 요소 초점 탐색 순서를 변경하는 데 사용할 수 있습니다.
당신이 가지고 있다면 :
text input A
text input B
submit button C탭 키를 사용하여 A-> B-> C를 탐색하십시오. Tabindex를 사용하면 해당 흐름을 변경할 수 있습니다.