Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Opera, input file, div tabindex (https://javascript.ru/forum/events/29562-opera-input-file-div-tabindex.html)

autosoft 03.07.2012 12:17

Opera, input file, div tabindex
 
Добрый день. Вопрос к знатокам.

Почему в броузере Opera элемент input (file) не генерирует событие onblur при переходе фокуса на div?

Пробовал в разных браузерах: IE, FF, Safari, Chromium - все так как должно быть.

В Opera - при переходе с <input type=file id='file1'> на <div tabindex=0>div</div> событие onblur не настает.
Почему? Как побороть?

<script language='JavaScript 1.5' type='text/JavaScript'>
 
dofocus = function (event) { document.title += 'F'; }
doblur = function (event) { document.title += 'B'; }

</script>
<html>
	<body>
		<input type=file id='file1' onfocus='dofocus();' onblur='doblur();'>
		<div tabindex=0>div</div>
		<input type=file id='file2' onfocus='dofocus();' onblur='doblur();'>
		<input type=file id='file3' onfocus='dofocus();' onblur='doblur();'>
	</body>
</html>

Deff 03.07.2012 12:33

autosoft,
Имхо по-моему в Опере, если только input type=file находится внутри формы с name="..."(*сказал на всякий случай),
Поскольку вне формы все эти деяния с type=file без толку в любом браузе, считать из input type=file может только форма

<script type="text/javascript">
 
function dofocus() {alert('A')}
function doblur () {alert('B')}

</script>
<form id="upload" method="post" enctype="multipart/form-data" action="/upload7">
		<input type=file id='file1' onfocus='dofocus();' onblur='doblur();'><br />
		<div tabindex=0>div</div><br />
		<input type=file id='file2' onfocus='dofocus();' onblur='doblur();'><br />
		<div tabindex=0>div</div><br />
		<input type=file id='file3' onfocus='dofocus();' onblur='doblur();'><br />
</form>

autosoft 03.07.2012 12:47

Это понятно. Пусть тогда такой пример:
<script>

dofocus = function (event) { document.title += 'F'; }
doblur = function (event) { document.title += 'B'; }

</script>
<html>
	<body>
		<form action='/'>
			<input type=file id='file1' onfocus='dofocus();' onblur='doblur();'>
			<div tabindex=0>div</div>
			<input type=file id='file2' onfocus='dofocus();' onblur='doblur();'>
			<input type=file id='file3' onfocus='dofocus();' onblur='doblur();'>
		</form>
	</body>
</html>

Все равно не работает.
Интересно, что если вместо "file" указать, например "text" - то все события генерируются в Opere так же как и в других браузерах.
Но нужно именно "file" и div с фокусом тоже нужен.

Deff 03.07.2012 12:49

autosoft,
Пример Выше

autosoft 03.07.2012 12:56

Пример Выше
Не работает этот пример. Ни в Opera12 (Linux) ни в Opera12 (Windows).

Событе onblur в Opera при переходе с input на div не настает.

bes 03.07.2012 15:35

Почему не настаёт, настаёт, можно проверить, пощёлкав на Tab, или выбрать какой-нибудь файл в опере (в хроме это не прокатит), вот если в опере файл не выбрать обработчик onfocus не сработает (в хроме по-любому не сработает), onblur соответственно тоже.

Deff 03.07.2012 15:44

Цитата:

Сообщение от bes
вот если в опере файл не выбрать обработчик onfocus не сработает

у мну всё работает версия 9.5 10.5 11.5

bes 03.07.2012 15:52

Цитата:

Сообщение от Deff
у мну всё работает версия 9.5 10.5 11.5

да, всё чётко и так работает, значит я где-то блажанул, пока экспериментировал:)
вот в хроме вообще не пашет, this.focus() не помогает для input type="file"

bes 03.07.2012 16:35

Для хрома, оперы и FF пока лучший вариант
<input type=file onclick='dofocus()' onchange="this.focus()" onblur='doblur()'>

в IE возникает лишний вызов onblur

autosoft 03.07.2012 17:18

Хорошо. Тогда все по-порядку (по примеру который дал Deff - но сути дела это не меняет):

1. Указываем в Opere: file://localhost/home/user/www/index.html.
Можно разместить файл на работающем сайте - эффект тот же.

2. Нажимаем Enter.
Открывается страничка с тремя input type=file и div между ними.

3. Нажимаем Tab.
Инициируется событие onfocus первого input.
Открывается диалог alert.

4. Нажимаем Esc.
Закрывается диалог alert.

5. Нажимаем Tab.
Ничего не происходит, но курсор перемещается на кнопку первого input.
Первый input все еще активен.

6. Нажимаем Tab.
Курсор переходит на первый div.

7. Нажимаем Tab.
Инициируется событие onfocus второго input.
Открывается диалог alert.

8. ...

Во всех браузерах (кроме Opera) на 6-м шаге инициируется событие onblur первого input.
В Opera - нет. Тестировал на Opera 11 и Opera 12.


Часовой пояс GMT +3, время: 18:02.