Несколько форм на одной странице HTML: как ограничить табуляцию одной формой?

Сайт, который я сейчас создаю, немного отличается от нормы. Вместо того, чтобы иметь несколько отдельных страниц, весь контент сайта находится в одном файле index.php и с использованием абсолютного позиционирования и javascript пользователь "кастет" по всему сайту со страницы на страницу.

На странице также есть несколько разных форм. Мне сказали не беспокоиться о том, чтобы обслуживать людей с отключенным Javascript, поэтому мы выбрали jQuery в сочетании с веб-сервисами JSON для всех форм на странице. Теперь все работает отлично, но есть небольшая проблема юзабилити: tab-index.

Поскольку существует несколько форм, табуляция из одного поля ввода в другое может привести к внезапному переходу пользователя на совершенно другую часть сайта, когда пользователь достигнет конца формы, а затем снова закроет вкладку. Это особенно раздражает Firefox и Safari, где кнопки и радиокнопки игнорируются при табуляции.

Итак, вот мой вопрос: кто-нибудь знает способ ограничить ориентацию пользователя на один элемент формы?

Ответ 1

Сайт, который я сейчас создаю, немного отличается от нормы. Вместо того, чтобы иметь несколько отдельных страниц, все содержимое сайта находится в одном файле index.php и с использованием абсолютного позиционирования и javascript пользователь "кастет" по всему сайту со страницы на страницу.

Здесь альтернативный подход, который может стать побочным этапом этой проблемы и может оказаться более доступным.

Я предполагаю, что у вас есть некоторые элементы на этой странице, которые вы используете для запуска панорамирования с одной подстраницы на другую?

Если это так, основной идеей здесь является то, что когда какая-либо страница "прокручивается", скройте эту "подстраницу" (предположительно, какой-то контейнер DIV) с отображением: none или visibility: hidden.

Ключевая проблема здесь заключается в том, что контент, скрытый с помощью любого из этих двух методов, не является настраиваемым, поэтому пользователь не может случайно войти в эти скрытые страницы. Также важно, с точки зрения доступности, разработчики прошивок знают, что игнорировать контент, помеченный таким образом, поэтому они будут читать только текущую страницу (что согласуется с тем, что видит зритель), а не целая страница.

Ответ 2

Почему бы не увеличить ваш tabindex, скажем, 100, за форму?

Итак, форма 1 будет иметь tabindeces от 100-112, форма 2 будет иметь tabindex от 200-234, форма 3 будет иметь tabindex, начинающийся с 300-314...

Ответ 3

Хорошо, я решил написать собственное решение, которое работает во всех основных браузерах (кроме Safari, но об этом позже). В основном, как это работает, вы назначаете класс последнему элементу с вкладкой в вашей форме, который обычно является кнопкой отправки, называемой "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, я слушаю событие keydown для этого элемента .lastInForm и проверяю 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.

Почему Apple решила отключить такую полезную функцию доступности по умолчанию, вне меня, но все, что я знаю, это если пользователь включит эту настройку, мой script тоже будет работать для них.

Ответ 4

Используйте tabindex в вашем (X) HTML

Это работает безупречно в 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>