2016-09-07 2 views
0

Мой вопрос: Как получить доступ к скрытым входным элементам через вкладку?Доступ к скрытым входным элементам

Подробное описание:

На моем сайте радио-кнопки я не установил видимости ни и настроил перед элементом, чтобы получить индивидуальный дизайн.

Проблема заключается в том, что я пытаюсь получить доступ к радио входного типа через вкладку. Я не могу это сделать, поскольку она скрыта.

Итак, может ли кто-нибудь предложить мне, как получить доступ к скрытым элементам ввода с вкладкой?

Сайт

Demo Form

Пожалуйста, перейдите по ссылке выше, вы можете найти форму там. Теперь попробуйте обратиться к переключателям с вкладкой. Он пропускает переключатели.

ответ

2

У вас должен быть элемент в вашем потоке вкладок, который поддерживает tabindex, а так как ваш переключатель скрыт, что не будет работать. якоря тег не поддерживает индекс вкладки, однако, так что вы можете обернуть внутренние элементы каждого из ваших Li тегов с a тегом, и назначить ему TabIndex, который работает в вашем потоке ...

Изменения:

<li tabindex="0" class="radio gchoice_2_14_0"> 
    <input style="margin-left:1px;" name="input_14" type="radio" value="2017/2018" id="choice_2_14_0" onclick="gf_apply_rules(2,[0]);" onkeypress="gf_apply_rules(2,[0]);"> 
    <label tabindex="0" for="choice_2_14_0" id="label_2_14_0">2017/2018 
    </label> 
</li> 

To:

<li tabindex="0" class="radio gchoice_2_14_0"> 
    <a tabindex="1010"> 
     <input style="margin-left:1px;" name="input_14" type="radio" value="2017/2018" id="choice_2_14_0" onclick="gf_apply_rules(2,[0]);" onkeypress="gf_apply_rules(2,[0]);"> 
     <label tabindex="0" for="choice_2_14_0" id="label_2_14_0">2017/2018 
     </label> 
    </a> 
</li> 

Это даст фокус якорь тег при закладке к нему (попку uming tabindex предыдущего элемента - «1009» или ниже).

Это отвечает на ваш вопрос о том, как использовать вкладку. Теперь, когда у вас это есть, вам нужно сделать пару вещей:

  1. Стиль элемента css для form li.radio a:focus, как вы сочтете нужным.
  2. Настройте события нажатия клавиш для элементов a, чтобы вы могли фактически выбрать свою фальшивую радиокнопку с нажатием клавиши ввода, когда она сфокусирована.
+0

'a' может не иметь потомков' input'/'label'. – unor

+0

Спасибо Роберту, чтобы было ясно, что скрытые элементы недоступны с вкладкой. Таким образом, я добавил tabindex к родительскому элементу и использовал некоторый javascript. –

Смежные вопросы