У меня есть поле ввода файла с opacity: 0; и filter: alpha(opacity: 0);, которое расположено поверх большого элемента div, который я использую в качестве кнопки для выбора файла, выбранное имя файла отображается под кнопкой.
Все работает нормально, но когда вы устанавливаете свойство width элемента файла (в данном случае ширину DIV, которая находится под ним) в IE, часть этой ширины является текстовой областью ввода файла , Конечно, IE делает свое дело, и в отличие от любого другого браузера, в текстовой области элемента нужно дважды щелкнуть, чтобы открыть диалоговое окно обзора. Firefox & Safari будет действовать одним щелчком мыши по текстовой части элемента. Я думал, что у меня есть обходной путь, так как IE позволяет вам вызывать событие .click() для элемента.
Я пробовал это:
<input type="file" onclick="this.click();" />
, который ничего не сделал, поэтому я попробовал это:
<input type="file" onmouseup="this.click();" />
Что сработало, и диалоговое окно просмотра показывалось одним щелчком мыши в текстовой области элемента. Но по какой-то причине при отправке формы, если был выбран файл, форма не будет отправлена, ничего не произойдет. Если файл не был выбран, остальная часть формы будет отправлена.
Так что теперь я вернулся на круги своя, и левую половину моей кнопки «Выбрать файл» нужно дважды щелкнуть, чтобы выбрать файл, а правую половину можно щелкнуть одним щелчком мыши. Я не могу придумать какой-либо другой способ заставить IE реагировать на один щелчок элемента. Я попытался использовать событие onfocus для запуска .click() также на элементе, который работает, но поскольку этот диалог загрузки будет единственным на странице, а <input type="file" /> - это первый отображаемый элемент ввода, щелчок событие запускается при загрузке страницы.
Итак, я попытался присоединиться к событию onload тела и установить фокус на что-то еще, но это было слишком поздно, и фокус уже был отдан вводу файла, и диалоговое окно обзора уже открылось. Я знаю, что приближаюсь к onfocus, есть ли способ не дать элементу сфокусироваться при загрузке страницы? Или есть другой способ сделать это, о котором каждый может подумать?
Спасибо!
[обновление]
Я снова попытался поиграть с onfocus, и, к сожалению, я ошибся, и фокус снова вызывается для элемента file при отправке формы, останавливая отправку и снова открывая диалоговое окно обзора