Можем ли мы заставить IE7 рассматривать элемент FILE TYPE = INPUT как один элемент управления?

Question

Когда дело доходит до навигации по форме HTML нажатием клавиши TAB, Internet Explorer 7 обрабатывает элемент INPUT с TYPE=FILE как два элемента управления (, см. MSDN для подробностей ). При первом нажатии клавиши TAB он фокусируется на текстовом поле, а второй раз при нажатии кнопки «Обзор». Это невидимо для JavaScript.

Проблема в том, что я хочу использовать Ajax Upload или что-то подобное, чтобы позволить пользователю щелкнуть что-то похожее на кнопку и увидеть, как появляется средство выбора файлов. Это работает, помещая невидимый элемент ввода файла под мышью. Мне удалось изменить сценарий, чтобы позволить вам использовать TAB для скрытого элемента ввода файла и для этого вызвать изменение CSS, так что фальшивая кнопка выглядит так, как будто она имеет фокус, в результате чего в браузерах, отличных от IE7, она выглядит пользователю, как будто вы можете нажать на кнопку и активировать ее, как вы ожидаете.

Это не может работать в IE7, потому что первый TAB переносит его в невидимое текстовое поле; нажатие клавиши ПРОБЕЛ добавляет пробел к невидимому имени файла вместо активации средства выбора файлов. Я попытался добавить обработчик события для keypress, который вызывает событие click, но когда я делаю это, событие change, от которого я зависел, похоже, не запускается.

Я начинаю думать, что единственное доступное решение для IE7 (и, я полагаю, IE8) будет состоять в том, чтобы заменить весь диалог формой, состоящей из двух частей - первая часть с (видимым) элементом ввода файла и Upload Кнопка, вторая часть со всеми другими элементами формы. Это прискорбно, потому что (а) IE7 получает менее удобное взаимодействие с пользователем, и (б) мне нужно добавить все виды дополнительного серверного кода, чтобы форма была отправлена ​​в двух частях.

Поэтому мне было бы интересно узнать, есть ли у кого-нибудь способ заставить элемент ввода файлов IE7 вести себя как один элемент управления или, альтернативно, разрешить JavaScript доступ к обоим элементам управления элемента (для чего DOM не был разработан !).

Answer 1

Это немного сложно сделать, но вот как:

Создайте новую кнопку для использования в качестве вашего «поддельного» элемента управления вводом (у вас это есть в качестве видимого элемента) Этот элемент должен быть кнопкой или ссылкой, чтобы он мог фокусироваться на вкладке (я предлагаю кнопку, чтобы он лучше работал в Safari).

Удалите ввод файла из порядка табуляции, установив для .tabIndex значение -1. Теперь он должен быть скрыт от глаз и порядка табуляции.

Назначьте события для ввода файла так, чтобы при активности затем фокус переместился обратно на фальшивую кнопку, из нее были скопированы значения и т. Д.

Назначить событие click для фальшивой кнопки, которая вызывает .click в элементе ввода файла. Это будет работать только для IE. Это также очень вероятно сломается в будущем выпуске.

Для браузеров в стиле Mozilla вы можете переместить фокус с фальшивой кнопки на ввод файла при keydown , событие нажатие клавиши произойдет на элементе управления файлом, и вы можете затем переместить кнопка возврата фокуса обратно на поддельную кнопку изменить . Это также должно дать вам функциональность del / backspace (очистить поле).

Очистка поля в IE может быть выполнена только путем восстановления нового элемента управления вводом файлов.

Answer 2

Как следует из моего другого ответа, мне удалось построить этот виджет с полной доступностью клавиатуры.

Мой искренний совет - бросить это преследование. Это обслуживание кошмар . Вы используете дыры в безопасности в браузере, чтобы заставить эту работу работать, и это лишь вопрос времени, когда поставщики закроют то, на что вы полагаетесь.

Answer 3

Вы также можете проверить swfupload , так как он может предоставить то, что вы собираетесь и многое другое.