2014-11-23 2 views
0

При нажатии на кнопку при фокусировке кнопки отправки фокус должен вернуться к tabindex="1". Вот HTML:

<input tabindex="1" id="tabindex1" value="tabindex='1'" autofocus> 
<input tabindex="2" id="tabindex2" value="tabindex='2'"> 
<input tabindex="3" id="tabindex3" value="tabindex='3'"> 
<input tabindex="4" id="submit_button" type="submit"> 

И вот в JQuery:

$("input").keydown(function (e) { 
    if (e.which == 9 && $(":focus").attr("id") == "submit_button") { 
     $('[tabindex="1"]').focus(); // Focuses on tabindex="2"!!! 
     // $('#tabindex1').focus(); // Does the same thing 
    } 
}); 

И here's the fiddle. Для жизни я не могу понять, почему это будет tabindex="2" вместо tabindex="1", и это даже делает это, когда я использую атрибут id вместо tabindex. Как мне добраться до tabindex="1"?

Update: Растворы ниже от обоих soktinpk и hobbs сделал трюк. Here's a fiddle показывая, что он работает с return false;, и вот скрипка, показывающая его работу с e.preventDefault();. Последующий вопрос: является ли одно из этих двух решений предпочтительным для другого?

+0

Добавьте 'return false' в оператор' if'. – soktinpk

ответ

4

Добавить return false в конце if заявления:

$("input").keydown(function (e) { 
    if (e.which == 9 && $(":focus").attr("id") == "submit_button") { 
     $('[tabindex="1"]').focus(); // Focuses on tabindex="2"!!! 
     // $('#tabindex1').focus(); // Does the same thing 
     return false; 
    } 
}); 
<input tabindex="1" id="tabindex1" value="tabindex='1'" autofocus> 
<input tabindex="2" id="tabindex2" value="tabindex='2'"> 
<input tabindex="3" id="tabindex3" value="tabindex='3'"> 
<input tabindex="4" id="submit_button" type="submit"> 

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

Возврат false гарантирует, что браузер не примет поведение по умолчанию.

+1

Альтернативно, 'e.preventDefault()'. – Oriol

2

Вы не предотвращаете действие по умолчанию, а действие по умолчанию для перехода - переход к следующему tabindex. Таким образом, ваш обратный вызов фокусирует TabIndex 1, а затем поведение по умолчанию клавиши табуляции фокусирует TabIndex 2.

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