Проблема с выделением фокуса первому элементу внутри контейнера

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

Я сделал образец, и он не работает, и я не могу понять проблему.

Пример можно найти здесь

Полный код

Скрипт

$(function(){
    $(":input:last","#div1").bind("keydown", function(e){
         if ( e.keyCode === 9 )
         {
             var firstElem = $(":input:first","#div1");
         firstElem.focus();
         }
    });
});

CSS

input.red { width: 200px; border: solid 1px red; }
input { width: 200px; }

HTML

<input type="text" class="red" />
<div id="div1">
    <input type="text" id="txt1" />
    <select id="sel1">
        <option>1</option>
    </select>
    <input type="text" id="txt2" />
</div>

Любая помощь будет оценена по достоинству.

Спасибо

Изменить

Всем спасибо. Задача решена. Это было отсутствие оператора return false; в событии нажатия клавиши.


javascript focus jquery
person rahul    schedule 25.03.2010    source источник

Ответы (3)


arrow_upward
3
arrow_downward

Попробуйте Keypress вместо Keydown

Также верните false, чтобы отменить обычную обработку нажатия клавиши.

Кажется, что происходит то, что вы перемещаете фокус, а затем происходит вкладка, перемещая ее на выбор. Вам нужно установить фокус, а затем вернуть false, чтобы обычная вкладка была отменена.

$(function(){
$(":input:last","#div1").bind("keydown", function(e){
     if ( e.keyCode === 9 )
     {
         var firstElem = $(":input:first","#div1");
         firstElem.focus();
         return false;
     }
});

});

person Russell Steen    schedule 25.03.2010

arrow_upward
2
arrow_downward

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

Пытаться:

$(function(){
  $(":input:last","#div1").bind("keydown", function(e){
    if ( e.keyCode === 9 ) {
      var firstElem = $(":input:first","#div1");
      firstElem.focus();
      e.preventDefault(); // or return false;
    }
  });
});

Проверьте приведенный выше пример здесь.

person Christian C. Salvadó    schedule 25.03.2010

arrow_upward
0
arrow_downward

Нельзя ли просто использовать атрибут tabindex в html?

Если ваша страница является динамической, может быть проще установить этот атрибут с помощью JS, а не фиксировать нажатие клавиши и т. д.

person matpol    schedule 25.03.2010
comment
Но я unbind проведу это keydown мероприятие позже. Поэтому я думаю, что использование tabIndex повлияет на элементы управления вне контейнера. - person rahul; 25.03.2010