Последовательность вкладок радиокнопок
Индексирование вкладок по умолчанию НЕ работает с переключателями, отлично работает с любым другим компонентом HTML, например. флажок, текстовое поле и т. д.
Ниже базовый код не работает для индекса вкладки переключателя, но отлично работает с флажком.
<div class = "box">
<input type = "radio" name = "rdgroup">H
<input type = "radio" name = "rdgroup">E
<input type = "radio" name = "rdgroup">L
</div>
<div class = "box">
<input type = "checkbox" name = "ckgroup">W
<input type = "checkbox" name = "ckgroup">O
<input type = "checkbox" name = "ckgroup">R
</div>
https://jsfiddle.net/wtyg7cLz/
Спасибо :)
даже если мы удалим "имя" такое же поведение, нет индексации последовательности jsfiddle.net/wtyg7cLz/1
мой друг не удаляет имя, просто меняет названия всех радиокнопок.
@PavanNagadiya да основная проблема в том, что больше нет радиогруппы jsfiddle.net/wtyg7cLz/2
Ответы 4
Когда вы назначаете одно и то же имя кнопкам соотношения сторон, они воспринимают вас как единый элемент управления. Однако, когда вы никого не выбираете, вы можете сфокусироваться на первом, а затем использовать кнопку со стрелкой, чтобы выбрать того, кого хотите.
Focus can move to a radio group via: The Tab key An Access Key or mnemonic targeting the label Activation of the label (through Assistive Technology mechanism)
The Tab key moves focus between radio button groups and other widgets.
When focus is on the group and when no radio button is selected: Tab key press moves focus to the first radio button in the group, but does not select the radio button. Shift+Tab key press moves focus to the last radio button in the group, but does not select the radio button.
Источник: https://www.w3.org/wiki/RadioButton
Кроме того, другое имя не учитывает разные элементы управления jsfiddle.net/wtyg7cLz/2
@ ahmad.ideveloper Я вижу его рабочий движущийся фокус на вкладке при разных именах
да, это рассматривается, но это НЕ ведет себя как "радиогруппа", сейчас нет единого выбора
@ ahmad.ideveloper, что вы имеете в виду? Я не понимаю.
радиогруппа предназначена для одиночного выбора из доступных опций в группе, например предположим, у вас есть Пол мужчина или женщина, поэтому вы должны Выбери один, ЕСЛИ мы удалим имя группы, пользователь может выбрать оба
@ ahmad.ideveloper да, поэтому вы даете то же имя, но ваш вопрос в том, что когда вы перемещаете фокус, вы должны иметь возможность сосредоточиться на следующем радио, это невозможно, посмотрите на мой ответ.
По сути, радиокнопка - это группа, которая функционирует как единый элемент, поскольку сохраняет только одно значение. Переход к радиогруппе приведет вас к первому элементу, а затем с помощью клавиш со стрелками вы перемещаетесь внутри группы ....
Как сказал @ Just Code:
When you assign same name to the ratio buttons, it treats you like a one control. However when you don't select anyone you can have a focus on first one and then use arrow button to select the one you want to.
Для радиокнопок как группы, если они имеют одинаковое имя, изменение фокуса будет работать или перемещаться с помощью клавиш со стрелками, например (вправо, влево, вверх, вниз). Это поведение переключателей по умолчанию, лучше оставить его по умолчанию . Если вы предпочитаете управление вкладками, я думаю, вам нужно реализовать его с помощью javascript, потому что, если вы дадите им другое имя, пользователь может выбрать все разные переключатели
enter code here
<div class = "box">
<input type = "radio" name = "rdgroup" tabindex = "1">H
<input type = "radio" name = "rdgroup" tabindex = "2">E
<input type = "radio" name = "rdgroup" tabindex = "3">L
</div>
<div class = "box">
<input type = "checkbox" name = "ckgroup">W
<input type = "checkbox" name = "ckgroup">O
<input type = "checkbox" name = "ckgroup">R
</div>вы можете использовать атрибут tabindex, чтобы получить обходной путь после того, как первый элемент переключателя будет сфокусирован, пользователь может затем использовать клавиши со стрелками (по умолчанию), чтобы выбрать желаемый вариант.
пожалуйста, проверьте ссылку ниже для получения более подробной информации. https://www.w3schools.com/tags/att_global_tabindex.asp
из-за того, что имя вашего переключателя такое же, поэтому он считается одним элементом управления.