javascript - 추가 - 배열 유효성 검사




하나의 HTML 페이지에 여러 폼:탭핑을 단일 폼으로 제한하는 방법? (3)

내가 현재 짓고있는 사이트는 표준과 조금 다릅니다. 여러 개의 별도 페이지가있는 대신 모든 사이트 콘텐츠는 단일 index.php 파일에 있으며 절대 위치 지정과 자바 스크립트를 사용하면 사용자가 페이지에서 페이지로 사이트를 "이동"합니다.

이 문제를 해결할 수있는 대체 방법이 있으며 더 쉽게 접근 할 수 있습니다.

하나의 하위 페이지에서 다른 페이지로 패닝을 트리거하는 데 사용하는 페이지의 요소가 있다고 가정합니다.

그렇다면 기본 아이디어는 페이지가 "스크롤 오프"될 때 display : none 또는 visibility : hidden을 사용하여 '하위 페이지'(아마도 일부 컨테이너 DIV)를 숨기는 것입니다.

여기서 핵심적인 문제는이 두 가지 방법 중 하나를 사용하여 숨겨진 내용이 Tabbable이 아니므로 사용자가 실수로 숨겨진 페이지를 탭 할 수 없다는 것입니다. 또한 접근성 측면에서 볼 때 중요한 점은 스크린 리더는 이러한 방법으로 마크 업 된 컨텐츠를 무시한다는 사실을 알고 있기 때문에 전체 페이지가 아닌 현재 사용자가 보는 것과 일치하는 현재 페이지 만 읽습니다.

내가 현재 짓고있는 사이트는 표준과 조금 다릅니다. 여러 개의 별도 페이지가있는 대신 모든 사이트 콘텐츠는 단일 index.php 파일에 있으며 절대 위치 지정과 자바 스크립트를 사용하면 사용자가 페이지에서 페이지로 사이트를 "이동"합니다.

페이지에는 몇 가지 다른 형식이 있습니다. Javascript가 해제 된 사람들에게 음식을 제공하는 것에 대해 걱정할 필요가 없으므로 페이지의 모든 양식에 대해 JSON 웹 서비스와 결합 된 jQuery를 선택했습니다. 이 모든 것이 완벽하게 작동하지만 약간의 유용성 문제가 있습니다 : 탭 인덱스.

여러 양식이 있기 때문에 한 입력 필드에서 다른 입력 필드로 탭 이동하면 사용자가 양식의 끝에 도달 한 후 다시 탭하면 사이트의 완전히 다른 부분으로 갑자기 건너 뛸 수 있습니다. Firefox와 Safari에서는 탭을 할 때 버튼과 라디오 버튼이 무시되는 것을 특히 귀찮습니다.

그래서 여기 내 질문 : 누군가가 단일 폼 요소에 사용자의 초점을 제한하는 방법을 알고 있습니까?


귀하의 (X) HTML에 tabindex 를 사용하십시오

이것은 Seamonkey 2.0.11과 Chrome 10.0에서 완벽하게 작동합니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title>untitled</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <style type="text/css">
        /* absolute positioning */
        #form1 { position: absolute; bottom: 0; right: 0; width: 40%; }
        #form2 { position: absolute; top: 100px; left: 30px; width: 40%; }
       /* floats
        #form1 {float: right; width: 40%; }
        #form2 {float: left; width: 40%; } */
    </style>
</head>

<body>

<form id="form1" action="#" method="get">
<fieldset>
<legend>Form 1</legend>
<div><label for="t1">T1</label><input type="text" id="t1" name="t1" tabindex="1" /></div>
<div><label for="t3">T3</label><input type="text" id="t3" name="t3" tabindex="3" /></div>
<div><label for="t2">T2</label><input type="text" id="t2" name="t2" tabindex="2" /></div>
<input type="submit" tabindex="4" />
</fieldset>
</form>

<form id="form2" action="#" method="get">
<fieldset>
<legend>Form 2</legend>
<div><label for="t6">T6</label><input type="text" id="t6" name="t6" tabindex="6" /></div>
<div><label for="t5">T5</label><input type="text" id="t5" name="t5" tabindex="5" /></div>
<input type="submit" tabindex="7" />
</fieldset>
</form>

</body>

</html>

좋아, 나는 모든 주요 브라우저에서 작동하는 내 솔루션을 작성하기로 결정했습니다 (Safari는 제외하고 나중에 더 많이 설명합니다). 기본적으로 어떻게 작동할까요? 폼의 마지막 "tab-able"요소에 클래스를 할당합니다.이 요소는 대개 'lastInForm'이라는 제출 버튼입니다. 간단한 HTML은 다음과 같습니다.

<form action="action.php">
<fieldset><input id="input1" name="input1" type="text" placeholder="text here" /></fieldset>
<fieldset><input id="input2" name="input2" type="text" placeholder="text here" /></fieldset>
<fieldset><input id="input3" name="input3" type="text" placeholder="text here" /></fieldset>

<button class="lastInForm" type="submit">I'm last</button>
</form>

최신 버전의 jQuery를 사용하여 해당 .lastInForm 요소에 대한 keydown 이벤트를 수신하고 탭 키에 해당하는 keyCode 9를 확인합니다. 그 이벤트를 받으면 가장 가까운 폼 요소를 찾아보고, 폼에서 첫 번째 입력 요소를 찾아 포커스를 적용합니다.

이렇게 :

$(document).ready(function(evt){

$('.lastInForm').live('keydown', function(evt){
    if(evt.keyCode === 9){
        evt.preventDefault();

        var form = $(this).closest('form');
        var input = $('input:first', form);

        if(input !== undefined){
            input.focus();
        }
    }
});
});

... 탭 키를 사용하여 요소를 반복 할 수있는 형식으로 결과가 깔끔하게 표시됩니다.

이제는 이전에 Safari를 제외한 모든 주요 브라우저에서 작동한다고 언급했습니다. 그 이유는 Safari가 기본적으로 텍스트 필드를 제외한 다른 요소로 이동할 수 없기 때문입니다. 이 동작을 사용하려면 다음을 확인해야합니다.

Preferences > Advanced > Universal Access: Press Tab to highlight each item on a webpage.

애플이 기본적으로 도움이되는 내게 필요한 옵션 기능을 해제 한 이유는 나를 넘어선 것이지만, 사용자가이 설정을 사용하면 내 스크립트가 제대로 작동하는 것입니다.





accessibility