Есть ли событие JavaScript, которое срабатывает при срабатывании переключателя индекса вкладки? (TABINDEX не работает для входов в IFRAME) - PullRequest
3 голосов
/ 04 января 2011

Мой конкретный вариант использования состоит в том, что у меня есть редактор WYSIWYG, который в основном является редактируемым iframe. Однако для пользователя это выглядит как текстовая область стандартного выпуска. Моя проблема в том, что у меня есть входы, которые находятся до и после этого редактора в (воспринимаемом) индексе вкладок, и я бы хотел, чтобы пользователь мог нажимать на вкладку (или эквивалент на выбранной платформе), чтобы перейти к редактору WYSIWYG. когда он находится в предыдущем элементе и Shift-Tab, чтобы добраться до него, когда он находится в последнем элементе.

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


UPDATE . Treeface разъяснил актуальную проблему в комментариях.

ПРОБЛЕМА :

В обычном случае вы можете использовать атрибут "TABINDEX" элемента <input>, чтобы контролировать, что при выделении из поля ввода "Тема" (в форме электронной почты) фокус попадает на поле ввода "Body" в электронном письме. Это делается просто путем назначения правильно упорядоченных значений атрибуту «TABINDEX» обоих полей ввода.

Проблема в том, что атрибут TABINDEX упорядочивает элементы только в одном кадре. Таким образом, если поле ввода «Body» фактически находится во внутреннем IFRAME, вы не можете перейти из «Subject» в родительском фрейме прямо в «Body» в IFRAME, используя порядок TABINDEX.

1 Ответ

4 голосов
/ 04 января 2011

Вы, вероятно, могли бы эмулировать желаемое поведение (возможно, с меньшими проблемами, чем при обнаружении клавиши TAB) с помощью событий onfocus / onblur соответствующих элементов ввода. Таким образом, вы не заботитесь о том, как пользователь попал на ввод редактора, будь то через вкладки или щелчок, или какой-то странный аддон FireFox, который позволяет переходить к элементу ввода по его идентификатору / имени / # (я почти определенное такое дополнение существует:)


UPDATE . ОП уточнил проблему в комментариях.

ПРОБЛЕМА :

В обычном случае вы можете использовать атрибут "TABINDEX" элемента <input>, чтобы контролировать, что при выделении из поля ввода "Тема" (в форме электронной почты) фокус попадает на поле ввода "Body" в электронном письме. Это делается просто путем назначения правильно упорядоченных значений атрибуту «TABINDEX» обоих полей ввода.

Проблема в том, что атрибут TABINDEX упорядочивает элементы только в одном кадре. Таким образом, если поле ввода «Body» фактически находится во внутреннем IFRAME, вы не можете перейти из «Subject» в родительском фрейме прямо в «Body» в IFRAME, используя порядок TABINDEX.

РЕШЕНИЕ

В родительском фрейме создайте новый элемент <INPUT>. Он будет невидимым (например, с помощью CSS или размером 1x1), будет иметь имя / идентификатор «Body_clone» и будет иметь значение атрибута TABINDEX, которое следует за TABINDEX поля «Subject». Он также будет иметь обработчик onFocus, который просто найдет элемент ввода «Body» внутри IFRAME и вызовет focus() для этого элемента.

Вы можете сделать то же самое с табулированием / смещением табуляции из элемента IFRAME «Body», создавая элементы ввода «Subject_iframe_clone» и «After-body_iframe_clone» в IFRAME, которые работают так же, как «Body_clone».

...