Форум

Black_Star · #1 (**permalink**) 20.12.2017, 21:37

Добрый день уважаемые. Подскажите, пожалуйста как повесить фокусировку на label, а точнее на элемент который находиться в середине него. Приведу пример

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	.bl_payment__label {
		position: relative;
		display: block;
		width: 100%;
		cursor: pointer;
	}
	.bl_payment__label:focus {
		color: #ffd608;
	}

	input {
		position: absolute;
		visibility: hidden;
	}

	.bl_payment__text {
		color: inherit;
		font-size: 16px;
	}

	.bl_payment__text {
		margin-left: 25px;
		color: #505050;
		font-size: 18px;
		position: relative;
		display: block;
		width: 100%;
	}
	.bl_payment__text:hover {
		color: #ffd608;
	}
	.bl_payment__text:focus {
		outline: none;
		color: #ffd608;
		text-decoration: underline;
	}

	.bl_payment__text:before {
		content: "";
		position: absolute;
		left: -25px;
		top: 8px;
		width: 11px;
		height: 11px;
		box-sizing: border-box;
		border: 1px solid #505050;
	}

	.bl_delivery__label input:checked + .bl_delivery__text,
	.bl_payment__label input:checked + .bl_payment__text {
		font-weight: bold;
		color: #ffd608;
	}
	.bl_delivery__label input:checked + .bl_delivery__text:after,
	.bl_payment__label input:checked + .bl_payment__text:after {
		content: "";
		position: absolute;
		left: -22px;
		top: 10px;
		width: 5px;
		height: 5px;
		background-color: #ffc808;
		box-sizing: border-box;
		z-index: 2;
	}
</style>
</head>
<body>
	<label class="bl_payment__label" tabindex="0">
		<input class="" type="radio" name="payment">
		<span class="bl_payment__text">Оплата наличными</span>
	</label>
	<label class="bl_payment__label" tabindex="0">
		<input class="" type="radio" name="payment">
		<span class="bl_payment__text">Банковский перевод</span>
	</label>
</body>
</html>

как сделать так что б по этим radio кнопкам можно было передвигаться через Tab ? (Допустим я хочу что б текст подсвечивался другим цветом и можно б было их активировать через Enter) ?

ksa · #2 (**permalink**) 21.12.2017, 10:04

Сообщение от Black_Star

как сделать так что б по этим radio кнопкам можно было передвигаться через Tab ?

У тебя нет радиокнопок как таковых... Ты их скрыл.
Т.ч. фокусироваться не на чем.

Black_Star · #3 (**permalink**) 21.12.2017, 12:16

Сообщение от ksa

У тебя нет радиокнопок как таковых... Ты их скрыл.
Т.ч. фокусироваться не на чем.

Как ходя Tab-ом по контенту иметь возможность активировать radio кнопки с клавиатуры, находящееся в label, так что б эти изменения можно было наблюдать визуально, при этом сами radio кнопки были бы скрыты для наблюдателя?

Теперь правильно...?

ksa · #4 (**permalink**) 21.12.2017, 13:21

Black_Star, при твоей верстке не получится как ты хочешь.

label реагирует только на клики мышкой, Enter она не отработает.

Black_Star · #5 (**permalink**) 21.12.2017, 15:01

ksa, ok я готов исправить вёрстку. Если прятать radio-кнопки через opacity это не помогает https://jsfiddle.net/huj9kpav/2/

рони · #6 (**permalink**) 21.12.2017, 16:03

Black_Star,
может скриптом
if (keycode == 13) checked
if (keycode == 9) next focus

Black_Star · #7 (**permalink**) 21.12.2017, 21:22

А проще ни как? неужели это такая сложна задача и мне обязательно надо вставлять эти JS костыли? Я же просто хочу сделать сайт с доступностью для бедных людей, у которых нету денег на мышку и тачпад

ksa · #8 (**permalink**) 22.12.2017, 08:35

Сообщение от Black_Star

Я же просто хочу сделать сайт с доступностью для бедных людей, у которых нету денег на мышку и тачпад

Тогда нефик мудрить с прятаньем радиокнопок...

Black_Star · #9 (**permalink**) 22.12.2017, 18:12

Сообщение от ksa

Тогда нефик мудрить с прятаньем радиокнопок...

Я готов выслушать решение без прятанья радиокнопок. Не активируется <input type="radio"> на Enter хоть ты тресни. Хоть в W3C жалобу пиши

ksa · #10 (**permalink**) 25.12.2017, 11:39

Сообщение от Black_Star

Я готов выслушать решение без прятанья радиокнопок. Не активируется <input type="radio"> на Enter хоть ты тресни.

Тут кагбэ нужно вспомнить как оно вообще работает на кнопках...
Инпут нормально фокусируется.

<label class="bl_payment__label" tabindex="0">
	<input class="" type="radio" name="payment">
	<span class="bl_payment__text">Оплата наличными</span>
</label>
<label class="bl_payment__label" tabindex="0">
	<input class="" type="radio" name="payment">
	<span class="bl_payment__text">Банковский перевод</span>
</label>
<script type='text/javascript'>
document.querySelector('input').focus();
</script>

Но работает на кнопках своеобразно. "Чекается" он не Enter'ом, а пробелом. Перемещение внутри одной группы не Tab'ом, а стрелками.
Причем при передвижении стрелками перемещается и отметка радиокнопки...

Вот с этим всем и придется мириться.

Форум

Справочник

Discord чат

Курсы javascript