Я пытаюсь заменить флажки/радиовходы с помощью значков. Для этого мне нужно скрыть исходный флажок/радио. Проблема в том, что я также хочу, чтобы форма правильно поддерживала ввод на клавиатуре, т.е. Чтобы вход оставался настраиваемым клавишей Tab
и выбирался с помощью Spacebar
. Поскольку я скрываю ввод, он не может быть сфокусирован, поэтому вместо этого я пытаюсь сделать его <label>
focusable.
Эта документация и различные другие источники привели меня к мысли, что я могу это сделать, используя атрибут tabindex
(соответствующий свойству HTMLElement.tabIndex
). Тем не менее, когда я пытаюсь назначить tabindex
на мой ярлык, он остается таким же несфокусированным, как и раньше, но я стараюсь Tab
на него.
Почему tabindex
не делает ярлык ярким?
Следующий фрагмент демонстрирует проблему. Если вы сконцентрируете ввод с помощью мыши и попытаетесь сфокусировать метку с помощью Tab
, это не сработает (вместо этого она фокусируется на <span>
с tabindex
).
document.getElementById('checkbox').addEventListener('change', function (event) {
document.getElementById('val').innerHTML = event.target.checked;
});
<div>
<input type="text" value="input">
</div>
<div>
<label tabindex="0">
<input type="checkbox" id="checkbox" style="display:none;">
checkbox: <span id="val">false</span>
</label>
</div>
<span tabindex="0">span with tabindex</span>