Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Фокус при табуляции (https://javascript.ru/forum/jquery/10663-fokus-pri-tabulyacii.html)

sergeos 14.07.2010 17:59

exec,
заработало!
ничего не понимаю...
вроде всё тоже самое...

спасибо, так оперативно, очень приятно

e1f 14.07.2010 18:10

Цитата:

Сообщение от exec (Сообщение 63750)
e1f, некроссбраузерно.

Я знаю. Но я бы на месте ТС'а сделал подсветку CSS'ом для Оперы/FF/Safari(?), а для IE и Chrome (вроде как он не понимает фокус) сделал на JS.
Кстати, IE8 осилил CSS, но только при переключении мышью -- при скакании TAB'ом скорее всего некорректно ведет себя фокус (вернее, некорректно теряется фокус), поскольку выделение с label не снимается.
Можно посмотреть пример подсветки CSS'ом тут.

Цитата:

Сообщение от sergeos (Сообщение 63752)
в примере e1f, у меня вообще вместо чекбоксов - инпутбоксы,
и тоже не работает подсветка...

Что значит инпутбоксы? Оо

Octane 14.07.2010 18:22

Так интересней ;)

<style type="text/css">
	.focus { color: #f00; }
</style>

<p><input id="ch1" type="checkbox" value="1" /> <label for="ch1">One</label></p>
<p><input id="ch2" type="checkbox" value="2" /> <label for="ch2">Two</label></p>
<p><input id="ch3" type="checkbox" value="3" /> <label for="ch3">Three</label></p>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
	if (/*@cc_on!@*/0) {
		document.attachEvent("onactivate", function () {
			if (event.srcElement.type == "checkbox") {
				$('label[for="' + event.srcElement.id + '"]').addClass("focus");
			}
		});
		document.attachEvent("ondeactivate", function () {
			if (event.srcElement.type == "checkbox") {
				$('label[for="' + event.srcElement.id + '"]').removeClass("focus");
			}
		});
	} else {
		document.addEventListener("focus", function (event) {
			if (event.target.type == "checkbox") {
				$('label[for="' + event.target.id + '"]').addClass("focus");
			}
		}, true);
		document.addEventListener("blur", function (event) {
			if (event.target.type == "checkbox") {
    			$('label[for="' + event.target.id + '"]').removeClass("focus");
    		}
		}, true);
	}
</script>



------------
В Chrome и Safari не работает при нажатии мышкой :(

e1f 14.07.2010 18:56

А смешивать навешивание событий pure-JS и поиск с использование jQuery -- это еще интересней :)

exec 14.07.2010 18:58

Да, ещё можно переписать на чистом JS функцию $(), а из jQuery'-вского оставить только addClass/removeClass, так будет ещё интереснее.

Octane 14.07.2010 19:01

Тут дело не в jQuery, мне лень было писать поиск по атрибутам и работу с CSS-классами, в примере показан способ отлова невсплывающих focus и blur, без навешивания обработчиков на каждый элемент.

e1f 14.07.2010 19:03

Ну, функция $ и так написана на чистом JS :) И вообще-то, именно она и не нужна, если все правильно делать. А нужны именно всякие (add|remove|swap|toggle)Class, getParentByClassName и тому подобные действительно полезные вещи.

e1f 14.07.2010 19:05

Цитата:

Сообщение от Octane (Сообщение 63773)
Тут дело не в jQuery, мне лень было писать поиск по атрибутам и работу с CSS-классами, в примере показан способ отлова невсплывающих focus и blur, без навешивания обработчиков на каждый элемент.

Оппа, а true я как-то пропустил, видимо читал по диагонали, сорри. Да, так намного интересней :)

Octane 14.07.2010 19:11

А live в последнем jQuery похоже тоже самое делает, только для IE события другие использует (focusin/focusout), и в Chrome c Safari тот же эффект, не работает при клике.

<style type="text/css">
	.focus { color: #f00; }
</style>

<p><input id="ch1" type="checkbox" value="1" /> <label for="ch1">One</label></p>
<p><input id="ch2" type="checkbox" value="2" /> <label for="ch2">Two</label></p>
<p><input id="ch3" type="checkbox" value="3" /> <label for="ch3">Three</label></p>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(":checkbox").live("focus", function (event) {
	$('label[for="' + event.target.id + '"]').addClass("focus");
}).live("blur", function (event) {
	$('label[for="' + event.target.id + '"]').removeClass("focus");
});
</script>

sergeos 15.07.2010 12:09

А почему я не могу толком посомтреть код, который выкладывает народ?
Вот у меня какая хрень получается.

Может что-то в брузере надо выставить? IE8.0


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