Атрибут tabIndex и AJAX - PullRequest
       23

Атрибут tabIndex и AJAX

0 голосов
/ 04 августа 2009

Я видел несколько сообщений о проблемах tabIndex, но мне не удалось найти ни одного подобного сценария, который мне нужно исправить.

Итак, вот пример проекта. Это веб-приложение ASP.NET 2.0, использующее расширения AJAX 1.0 и jQuery. Я ищу любые идеи на любом языке программирования, чтобы справиться со сценарием, подобным этому.

Итак, во-первых, я знаю, как установить tabIndex, будь то жестко или автоматически сгенерированный в пользовательском элементе управления. У меня проблема в том, что если у вас есть композитный элемент управления с использованием AJAX, например элемент управления grid, и у вас все свойства tabIndex установлены для всех элементов ввода формы, включая видимые строки в вашем элементе управления AJAX. Что, например, произойдет с упорядочением табуляции, если я добавлю новую строку в сетку через AJAX?

Ниже приведен порядок табуляции, а не порядок элементов в HTML:

Начальная загрузка страницы

Input 1, tab index 1
Input 2, tab index 2
Grid 1, tab index 3
|-- Row 1 (loaded initially)
     |-- Cell 1, tab index 4
     |-- Cell 2, tab index 5
Input 3, tab index 6
etc.

теперь через AJAX я добавляю новую строку в сетку

Input 1, tab index 1
Input 2, tab index 2
Grid 1, tab index 3
|-- Row 1 (loaded initially)
     |-- Cell 1, tab index 4
     |-- Cell 2, tab index 5
|-- Row 2 (loaded via AJAX)
     |-- Cell 1, tab index ?
     |-- Cell 2, tab index ?
Input 3, tab index 6
etc.

Теперь из того, что я понимаю, значение атрибута tabIndex по умолчанию равно -1, так что все элементы без атрибута вкладываются в том порядке, в котором они появляются в дереве объектной модели документа после любых элементов, если они имеют значение атрибута tabIndex> 0 Таким образом, мои ячейки строки 2 получат -1 в качестве значения tabIndex. Поэтому вкладка в моей форме будет выглядеть так:

Input 1, tab index 1
Input 2, tab index 2
Grid 1, tab index 3
|-- Row 1 (loaded initially)
     |-- Cell 1, tab index 4
     |-- Cell 2, tab index 5
Input 3, tab index 6

|-- Row 2 (loaded via AJAX)
     |-- Cell 1, tab index 7 (7 because of default -1 value behavior)
     |-- Cell 2, tab index 8 (8 because of default -1 value behavior)

Я посмотрел на некоторые плагины jQuery, но ни один не справляется с тем, что я хочу сделать (или, по крайней мере, я так не думаю). Я проверил плагин jQuery Tabindex и плагин jQuery Field (v0.9.2).

Мои идеи:

-Проход по элементам формы на стороне клиента для сброса всех значений tabIndex. Это работает, если вы хотите, чтобы порядок элементов отображался в форме, но, вероятно, это происходит медленно и, скорее всего, вызовет сбой страницы при загрузке. Кроме того, если вы хотите, чтобы порядок отображался в форме, зачем вообще использовать tabIndex? Элементы без него будут tabIndex = -1 и будут вкладываться в порядке их появления в HTML.

- Для составных элементов управления назначить зарезервированный диапазон tabIndex, поэтому, когда я ударил по сетке с ячейкой строки 1, одна tabIndex равна 4, я говорю, что следующим элементом управления после сетки будет, например, tabIndex = 500, так что я могу зарезервировать другие значения tabIndex, когда я добавляю новые строки через AJAX.

- Ваша идея идет сюда.

Ответы [ 2 ]

2 голосов
/ 05 октября 2009

Хотя это не ответ на ваш вопрос, я подумал, что стоит упомянуть. -1, насколько я знаю, не является значением по умолчанию для tabindex, установка tabIndex на -1 будет означать, что вы не можете использовать табуляцию для этого элемента почти во всех современных браузерах (включая IE). Это может быть очень запутанным, если вы предполагаете это в любом сценарии тестирования.

0 голосов
/ 20 сентября 2016

На самом деле, в вашем случае решение будет довольно простым. Просто установите для всех входов формы и динамических «1». Он будет отображать все 1 в зависимости от относительного порядка. Единственная проблема, я думаю, браузер устанавливает индекс табуляции при загрузке документа, поэтому элементы Ajax могут никогда не попадать в порядок табуляции.

...