Фокус при табуляции
Народ, я тока-тока вот стал изучать...
Помогите, а, решить один вопросик. У меня еть такая штука: <input id="CheckBoxList1_0" type="checkbox" name="CheckBoxList1$0" /><label for="CheckBoxList1_0">Выбор 1</label> <input id="CheckBoxList1_1" type="checkbox" name="CheckBoxList1$1" /><label for="CheckBoxList1_1">Выбор 2</label> <input id="CheckBoxList1_2" type="checkbox" name="CheckBoxList1$2" /><label for="CheckBoxList1_2">Выбор 3</label> Суть в том, что человек заполняющий форму на сайте не прибегает к использованию мыши, поэтому я бы хотел, чтобы по нажатию {TAB} когда фокус попадает на чекбокс, то эта строка с конкретным чекбокбоксом подсвечивалась бы, ну и естественно, подсветка снималась, после ухода табуляции. Подсобите как и чем такое можно решить? |
$(':checkbox').focus(function () {
$(this).next().addClass('класс');
}).blur(function () {
$(this).next().removeClass('класс');
});
|
exec,
но что-то не сработало... добавил такой класс
#onbox {
color: #FFCC00;
}
никаких изменений, на новичка не обессудьте..., что я не так делаю? |
.onbox
|
Цитата:
|
всё перепробвал, сейчас у меня так на странице:
<head>
<style>
.onbox {
color: #FFCC00;
}
</style>
</head>
<body>...
<input id="CheckBoxList1_0" type="checkbox" name="CheckBoxList1$0" /><label for="CheckBoxList1_0">Выбор 1</label>
<input id="CheckBoxList1_1" type="checkbox" name="CheckBoxList1$1" /><label for="CheckBoxList1_1">Выбор 2</label>
<input id="CheckBoxList1_2" type="checkbox" name="CheckBoxList1$2" /><label for="CheckBoxList1_2">Выбор 3</label>
...
</body>
</script>
$('.checkbox').focus(function () {
$(this).next().addClass('onbox');
}).blur(function () {
$(this).next().removeClass('onbox');
});
</script>
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Some test</title>
<style type="text/css">
input:focus ~ label {
color: #FFCC00;
}
</style>
</head>
<body>
<p><input id="ch1" type="checkbox" name="1" value="1" /> <label for="ch1">One</label></p>
<p><input id="ch2" type="checkbox" name="2" value="2" /> <label for="ch2">Two</label></p>
<p><input id="ch3" type="checkbox" name="3" value="3" /> <label for="ch3">Three</label></p>
</body>
</html>
|
Цитата:
e1f, некроссбраузерно. UPD: рабочий пример:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js">
</script>
<style type="text/css">
.onbox {
color: red;
}
</style>
</head>
<body>
<input type="checkbox" id="ch1" />
<label for="ch1">
Number one
</label>
<br />
<input type="checkbox" id="ch2" />
<label for="ch2">
Number two
</label>
<br />
<input type="checkbox" id="ch3" />
<label for="ch3">
Number three
</label>
<script type="text/javascript">
$(':checkbox').focus(function () {
$(this).next().addClass('onbox');
}).blur(function () {
$(this).next().removeClass('onbox');
});
</script>
</body>
</html>
|
exec,
я ошибся, пардон, я чисто экспериментировал. у меня написано так: $(':checkbox') но всё равно не работает. в примере e1f, у меня вообще вместо чекбоксов - инпутбоксы, и тоже не работает подсветка... может это чисто у меня в браузере такая проблема? у меня IE8 |
sergeos, посмотрите мой предыдущий пост, я добавил рабочий пример.
|
exec,
заработало! ничего не понимаю... вроде всё тоже самое... спасибо, так оперативно, очень приятно |
Цитата:
Кстати, IE8 осилил CSS, но только при переключении мышью -- при скакании TAB'ом скорее всего некорректно ведет себя фокус (вернее, некорректно теряется фокус), поскольку выделение с label не снимается. Можно посмотреть пример подсветки CSS'ом тут. Цитата:
|
Так интересней ;)
<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 не работает при нажатии мышкой :( |
А смешивать навешивание событий pure-JS и поиск с использование jQuery -- это еще интересней :)
|
Да, ещё можно переписать на чистом JS функцию $(), а из jQuery'-вского оставить только addClass/removeClass, так будет ещё интереснее.
|
Тут дело не в jQuery, мне лень было писать поиск по атрибутам и работу с CSS-классами, в примере показан способ отлова невсплывающих focus и blur, без навешивания обработчиков на каждый элемент.
|
Ну, функция $ и так написана на чистом JS :) И вообще-то, именно она и не нужна, если все правильно делать. А нужны именно всякие (add|remove|swap|toggle)Class, getParentByClassName и тому подобные действительно полезные вещи.
|
Цитата:
|
А 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>
|
А почему я не могу толком посомтреть код, который выкладывает народ?
Вот у меня какая хрень получается.  Может что-то в брузере надо выставить? IE8.0 |
Скорее всего политика безопастности какая-то. Поковыряйся в настройках. А лучше -- смени бровз :) Использовать IE для чтения в нете -- ололо :(
|
| Часовой пояс GMT +3, время: 11:24. |