2010-10-12 2 views
1

Я заметил разницу в поведении между хром и IE обработки кликов ввода файлов.Действия ввода файлов в IE

jsFiddle пример here.

В Chrome, щелкнув в любом месте входа (текст или бит кнопки), запускается диалог с файлом.

В IE (тестирование 7) вы должны нажать на фактическую кнопку, а не на текстовый бит.

Проблема в том, что я использую прозрачный ввод файла поверх обычного текстового поля. Нажатие на текстовое поле должно открыть диалог. В Chrome это работает нормально, так как общий размер ввода такого же размера, как и в текстовом поле.

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

Любые идеи о том, как исправить это?

Благодаря

+1

Awwww ... разве это не опасное обходное решение, которое может быть отключено в будущих поколениях браузеров по соображениям безопасности? Нет шансов использовать что-то еще, как стильный Flash-загрузчик? –

+0

нет, нет вероятность использования flash. Если он будет отключен в будущих браузерах, это будет всего лишь 10-минутная работа, чтобы изменить его, пока я не хочу, по крайней мере, попытаться дать моим пользователям удобный интерфейс. – fearofawhackplanet

ответ

1

Вы должны найти способ, чтобы вызвать событие щелчка на file поле ввода ..

Возможно добавление обработчика щелчка на подстилающей текстовое поле, которое выдает щелчок событие в поле файла.

пример: http://jsfiddle.net/MqbrV/

Это не работает в Firefox (но действие по умолчанию должно быть достаточно) и Opera (, где никто не работает).

+0

@Tim, спасибо за редактирование .. –

+0

Это было не совсем то, что я искал, но дал мне ключ, который мне нужен, спасибо. – fearofawhackplanet

3

Посмотрите, как эти ребята сделали это: http://www.filamentgroup.com/lab/jquery_custom_file_input_book_designing_with_progressive_enhancement/

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

Они написали небольшой взлом для поддержки щелчка для IE и Opera, используя jQuery для явного привязки события click.

См: http://dwpe.googlecode.com/svn/trunk/fileinput/js/jQuery.fileinput.js (линия 52)

+0

Фактически, код в строке 52 предназначен для запуска события изменения во входном файле, похоже, что IE тоже не справляется с этим. Поэтому ваш пост был очень полезен для меня в любом случае, поскольку мне тоже нужно было заниматься этим вопросом. Если вы посмотрите ближе к нижней части этого файла, вы увидите, что они имеют дело с обработкой щелчка, фактически перемещая входной файл на mousemove в поддельный элемент управления, поэтому клик всегда происходит в правильном месте. – fearofawhackplanet