HTML+CSS+JavaScript

Всем привет, кто-нибудь может подсказать почему этот код работает только в IE. Не могу исправить и сделать его рабочим в других браузерах. Кто силен в javascript помогите плиз.
Смысл такой: input (file) скрываю. По нажатии кнопки (button) открывается окно выбора файлов (сам же input file всегда скрыт). Выбранный файл, его путь, записывается в input text. Второй день голову ломаю.

<form name="f"> <div class="box"> <input class="inp" name="text" type="text" id="a" value="" > <input class="btn" type="button" value="go" onclick="document.getElementById('b').click();"> <input class="file" name="file" id="b" type="file" onChange="document.getElementById('a').value=this.value"> </div> </form>

Может что не так делаю?
Спасибо

А что не работет собственно - скрытие елемента file? Ну тут и нет такого сценария. Эта форма для загрузки на сервер?

Да, это кусок формы. В Mozilla код не работает. Думаю проблема с click(). JS я почти не знаю, так по пустякам, так что точно, что не работает сказать не могу.
А скрываю я его посредством CSS

<style> div.box {      width:190px;      height: 21px;      } input.inp {   width: 150px;   height: 21px;   border: 1px solid #CCC !important;      } input.btn {   width: 30px;   height: 21px;   border: 1px solid #CCC !important;      } input.file {   position: absolute;   filter: alpha(opacity=0);   opacity: 0;   -moz-opacity: 0;   z-index: 2;   width: 0;      } </style>

filter: alpha(opacity=0) - будет работать только в IE.
click() - эмулирует щелчок на объекте левой кнопкой мыши.
все сто касается сценария, это работает. А зачем скрывать file и дублировать путь файла?

вся эта заморочка из-за того, что input (file) не просто привести к одному и тому же стилю, ну или виду в разных браузерах. А ток хочется чтоб все инпуты имели одинаковый вид. Если есть другое решение буду рад если Вы его покажите.
Спасибо

Ну тогда эта затея ничего не стоит. Скроете вы элемент, а если пользователь ошибся с выбором файла, как ему исправить свою оплошность в таком случае? Кнопа "Обзор..." этого элемента во всех браузерах выглядит по разному, и доступа к ней по-моему нет.

Как же тогда быть? Делают же как-то!

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

http://www.softtime.ru/forum/read.php?id_forum=4&id_theme=41490

Спасибо за ссылку. Но что в моем случае делать не знаю. Что дописать то надо?

В вашем случае, приготовьте свое - Input-text и Input-button, вот этим элементам вы укажите стиль, который будет смотреться во всех браузерах одинаково - они и будут у вас имитировать поле file. Поле file скройте раз и навсегда:

<input type="file" style="display: none;">

Input-button (Обзор...) - должна иметь вызов функции по клику, вот уже в этой функции пропишите все то, что у вас в полях было ранее прописано - присваивание полю Input-text значения поля Input-file и прочее что вам необходимо. Пользователь будет иметь возможность исправить ошибочный ввод, а вы получите желаемые стили.
Ссылка CNT - это о методе click().

Все равно не работает в Mozilla.

<style> div.box {     width:190px;     height: 21px;     } input.inp {   width: 150px;   height: 21px;   border: 1px solid #CCC !important;     } input.btn {   width: 30px;   height: 21px;   border: 1px solid #CCC !important;     } input.file {   display: none;     } </style> <form name="form"> <div class="box"> <input class="inp" name="inp" type="text" id="a" value="" > <input class="btn" type="button" value="go" onclick="form.document.getElementById('b').click('b');"> <input class="file" name="file" id="b" type="file" onChange="document.getElementById('a').value=this.value"> </div> </form>

Ткните где не так.

click(), а не click('b').

все равно не работает.

Кто-нибудь может помочь? Очень надо.

<input class="btn" type="button" value="go" onclick="this.form.file.click();">

И снова нет. Видимо все так плохо.

Опытным путём установлено:

1. Cобытие "нажатие на кнопку" сгенерировать можно в любом браузере

2. Однако в "мозилловских" браузерах (FF и Opera) сгенерированное нажатие на кнопку <input type=FILE> хоть фактически и происходит, но диалоговое окошко не открывается.
Сненерированное нажатие на кнопку <input type=BUTTON>, <input type=CHECKBOX> или <input type=SUBMIT> прекрасно отрабатывается полностью - т.е. делается то, что и должно делаться по нажатии на эти кнопки. А вот с type=FILE - нет

3. Как это "обойти" и можно ли "обойти" - не знаю. Видимо, надо поглубже разобраться. Метод initMouseEvent () и используемые в нём атрибуты - "не при делах": проверено - там вё ОК!.
Может быть, таковым образом в Mozilla обеспечивается безопасность? Типа, на кнопку "Обзор" юзер должен нажимать сам, осознавая, что он делает?
...
Код, демонстрирующий нормальную работу в MSIE (с разными кнопками) и показывающий "непонятку" для type=FILE в Mozilla (и только для этой кнопки!), прилагается:

<script> var OBJ; function myFunc (x) { var Brous = (navigator.userAgent.indexOf ('MSIE') != -1) ? 1 : 0; if (Brous) document.getElementById (x).click (); else    {    var evt = document.createEvent ('MouseEvents');    evt.initMouseEvent ('click', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);    document.getElementById (x).dispatchEvent (evt);    } } </script> <form method="get"> <table border="1" cellpadding="10" bgcolor="#efedee"> <tr><th colspan="2">Здесь кликаем</th><th>Это не трогаем, только смотрим</th></tr> <tr><th>1</th> <td><input type="button" value="кликаем по type=button" onclick="myFunc ('btn')"></td> <td bgcolor="black"><input id="btn" type="button" value="button" onclick="this.form.inf.value = this.type"></td> </tr> <tr><th>2</th> <td><input type="button" value="кликаем по type=submit" onclick="myFunc ('sbm')"><br>(слово submit увидим в адресной строке)</td> <td bgcolor="black"><input id="sbm" type="submit" value="submit" onclick="this.form.inf.value = this.type"></td> </tr> <tr><th>3</th> <td><input type="button" value="кликаем по type=checkbox" onclick="myFunc ('cbx')"></td> <td bgcolor="black"><input id="cbx" type="checkbox" onclick="this.form.inf.value = this.type"></td> </tr> <tr bgcolor="yellow"><th>4</th> <td><input type="button" value="кликаем по type=file" onclick="myFunc ('fil')"></td> <td bgcolor="black"><input id="fil" type="file" onclick="this.form.inf.value = this.type"></td> </tr> <tr><td colspan="3" bgcolor="aqua"><font color=red>Смотрим СЮДА!</font><br>Клик сгенерирован по: <input name="inf"></td></tr></table> </form>

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

Вот теперь и у меня вопрос - вот на эту конструкцию document.getElementById (x).dispatchEvent (evt); у меня FF не реагирует. Перевернул всю свою умную книгу, ни в какую, причем консоль не выдает ошибок, по которым можно было хоть как то определиться.
Вчера к коду ZeeG добавил соответсвующее и ничего, стал просто примеры из книги Д.Гудмана выполнять - ноль эмоций со стороны FF. Не думаю, что это сам FF, может я чего-то не допонимаю, может плагины какие либо мешают ему? Странно, но не только пример этого сценария (из книги) мой FF не отрабатывает, есть и некоторые другие - эффект такой же, тишина без указаний на ошибки.

Неплохо бы разобраться. На будущее.

как оно всегда и бывает - сделал сам и находишь нужную статью.
http://www.habrahabr.ru/blog/la_france/24341.html.
всем привет