HTML 튜토리얼: tabIndex를 사용하여 웹 페이지 탐색을 쉽게 구현

최근 웹사이트에서 양식 데이터를 입력할 때 한 열을 채우고 다음 열로 이동하기 위해 [Tab] 키를 눌렀을 때 커서가 다른 열로 넘어가는 것을 보고 깜짝 놀랐습니다. 페이지 하단의 한 열에 있습니다. 마우스를 사용하여 커서를 올바른 텍스트 필드로 이동했지만 곧 [Tab] 키 문제가 다시 시작되었습니다. 이러한 상황으로 인해 페이지 디자인과 tabIndex 속성이 키보드를 통한 탐색에 어떻게 도움이 되는지 살펴보고 싶었습니다.

[Tab] 키를 통해 요소에 액세스

HTML DOM tabIndex 속성을 사용하면 HTML 요소의 탭 순서를 설정하거나 반환할 수 있습니다. . IE
4.0이 이 기능을 최초로 지원했습니다. 처음에는 입력 필드, 링크 등과 같이 [Tab] 키를 통해 실제로 액세스할 수 있는 요소만 지원됩니다. 현재 모든 웹 브라우저는 이 기능과 페이지에 표시되는 모든 요소를 ​​지원합니다. 적용하기 전에 HTML 사양을 두 번 클릭하여 요소가 이 기능을 지원하는지 확인할 수 있습니다.

　tabIndex 속성

tabIndex 속성을 적용하는 과정은 간단하고 간단합니다. 예를 들어, 다음 HTML 소스 코드는 탭 순서의 첫 번째 열인 입력 필드에 tabIndex 값 1을 할당합니다.

　

처음에 [Tab] 키를 선택하면 이 입력란이 있는 웹 페이지에서 커서를 다음으로 이동합니다. firstName 필드.

tabIndex 속성에 값을 할당할 때 몇 가지 문제에 주의해야 합니다. 다음은 몇 가지 할당 규칙입니다. tabIndex가 0인 요소는 소스 코드(또는 기본 페이지 동작)에 따라 정렬됩니다.

0보다 큰 tabIndex 값은 탭 순서를 설정합니다. 양수 tabIndex 값을 가진 모든 요소는 tabIndex 값이 0인 모든 요소 앞에 나타납니다.

실수로 동일한 tabIndex를 여러 요소에 할당하면 다른 요소와 마찬가지로 tabIndex가 0으로 처리됩니다.

tabIndex를 -1로 지정하면 [Tab] 키를 사용할 때 이 요소가 무시됩니다. 참고: -1 값을 사용하면 onfocus 및 onblur 이벤트가 계속 활성화됩니다.

tabIndex 값은 0에서 32767 사이의 숫자일 수 있습니다.

목록 A의 샘플 HTML 코드는 페이지의 각 항목에 tabIndex 값을 할당합니다. 입력 필드와 DIV 태그에는 tabIndex 속성이 포함되어 있어 사용자가 키보드를 사용하여 페이지 요소를 정독할 수 있습니다. (DIV 태그는 포커스를 얻는 방법에 대해 많은 정보를 제공하지 않지만 입력 요소가 아닌 요소에서 tabIndex를 사용하는 방법을 설명하고 싶었습니다.) 값이 -1인 버튼에는 값이 할당되며 [Tab ] 키가 적용됩니다.

입력 요소가 가득 차면(최대 길이에 도달) 작은 JavaScript 스크립트를 추가하여 자동 위치 지정 기능을 구현할 수 있습니다. 이것은 기본 함수이므로 스크립트가 해당 함수를 어떻게 구현하는지 살펴보겠습니다.

　function checkLen(x,y) {
if
(y.length==x.maxLength ) {
var next=x.tabIndex
if (next document.getElementById("frmTest").length)
{
document.getElementById("frmTest").elements [next -1].focus()
} }
}

　이 함수는 두 개의 변수를 허용합니다. 첫 번째 변수는 입력 필드이고 두 번째 변수는 필드 값을 포함합니다. 그리고 기둥의 길이를 기둥의 최대 허용 길이와 비교하십시오. 동일하면(즉, 열이 가득 차면) tabIndex 값을 열에서 읽습니다. 값이 최대 길이보다 작으면 포커스가 다음 열로 이동합니다.

이 함수는 각 컬럼의 onkeyup 이벤트에 값을 할당하는 함수이므로 해당 컬럼에 값을 입력할 때마다 최대 길이에 도달했는지 확인하는 함수입니다. 라고 불리다. 최대값에 도달하면 커서는 탭 순서에 따라 다음 열로 이동합니다. 목록 B의 소스 코드는 위 예제에 이 함수를 추가합니다.

접근성 향상

요소에 tabIndex를 지정하면 키보드를 자주 사용하는 사용자가 보다 편리하게 네트워크에 액세스할 수 있습니다. 인터페이스; 장애인이 사용하는 PDA, 휴대폰, 스크린 리더 등 비표준 사용자도 혜택을 누릴 수 있습니다. 애플리케이션의 기능을 확장하는 것은 무엇이든 유익합니다.

시각적으로 매력적이고 백엔드 서버 구성 요소에서 올바르게 처리될 수 있도록 웹 양식을 디자인하는 데 많은 시간을 할애할 수 있습니다. 그러나 비표준 기술이나 브라우저를 사용한 테스트를 소홀히했을 수도 있습니다. 일반적인 예는 마우스를 포기하고 키보드를 사용하여 양식을 탐색하는 것입니다. HTML 표준에는 [Tab] 키를 통해 액세스할 항목을 제어할 수 있는 tabIndex 속성이 포함되어 있습니다.

위 내용은 HTML 튜토리얼 내용입니다. tabIndex를 사용하여 웹 탐색을 쉽게 구현하려면 PHP 중국어 사이트(www.php)를 참고하세요. .cn)!