Пользовательский заказ на клавиатуре в html4

Question

Я хочу управлять функциональностью клавишной панели, я использую шаблон для заголовка, нижнего колонтитула и боковой панели, где существует много элементов привязки &. В содержимом шаблона мы не можем поставить и атрибут tabindex, который не находится под моим контролем.

Средняя часть шаблона моя рабочая область, где я создал форму и некоторого элемент

<fieldset id="myWorkArea"> 
    <div class="fieldrow"> 
     <label for="input1">Class</label> 
     <input id="input1"/> 
     <a id="help1" href="#">what's this?</a> 
    </div> 
    <div class="fieldrow"> 
     <label for="input2">Class</label> 
     <input id="input2"/> 
     <a id="help2" href="#">what's this?</a> 
    </div> 
</fieldset> 

В коде выше я хочу курсор обхода в ниже порядка ид.

#help1 > #input1 
#help2 > #input2 

ли какой-либо подход к контролю клавиатуры порядка перемещения только в #myWorkArea Fieldset элементов, мы не можем поставить TabIndex для всех элементов в странице?

Answer 1

Даже если у вас нет доступа к шаблону, вы можете добавить атрибут tabindex программно.

Здесь у вас есть фрагмент кода:

var tabindex = 1; 
 

 
$('#myWorkArea .fieldrow').each(function() { 
 
\t $('a', this).attr('tabindex', tabindex++); 
 
\t $('input', this).attr('tabindex', tabindex++); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<fieldset id="myWorkArea"> 
 
    <div class="fieldrow"> 
 
     <label for="input1">Class</label> 
 
     <input id="input1"/> 
 
     <a id="help1" href="#">what's this?</a> 
 
    </div> 
 
    <div class="fieldrow"> 
 
     <label for="input2">Class</label> 
 
     <input id="input2"/> 
 
     <a id="help2" href="#">what's this?</a> 
 
    </div> 
 
</fieldset>

Надеется, что это помогает!

Answer 2

Вы можете добавить индекс вкладки программно, используя javascript, как сказал Давид в своем ответе.

Или Если вы хотите, вы можете управлять функциональностью табуляции, привязывая свое собственное событие только к таким элементам, как код ниже.

Рабочие FIDDLE

$(function(){ 
    var inputs = $('a#help1, a#help2,input#input1, input#input2'); 
      $(inputs).bind('keydown', function (e) {  
       var self = $(this), form = self.parents('form:eq(0)'), focusable, next; 
      //check keycode for tabbing  
      if (e.keyCode == 9) { 
        switch($(this).attr("id")){      
         case "help1": 
          next=$('#input1'); 
          break; 
          case "help2": 
          next=$('#input2'); 
          break; 
          case "input1": 
          next=$('#help2'); 
          break; 
          case "input2": 
          next=$('#help1'); 
          break; 
          }      
        next.focus(); 
        e.preventDefault(); 
        return false; 
       } 
      }); 
});