javascript - 将焦点集中到容器内的第一个元素时出现问题

Question

我只是想在按下 Tab 键时在特定元素内的元素之间循环焦点。我想要做的是，当从元素内的最后一个控件按下选项卡时，不要将焦点设置到不是元素后代的任何元素。此时焦点必须设置到容器内的第一个输入元素。

我已经做了一个示例，但它不起作用，我无法找出问题所在。

可以找到示例 here

完整代码为

Script

$(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>

如有任何帮助，我们将不胜感激。

谢谢

编辑

谢谢大家。问题解决了。这是因为 keydown 事件中缺少 return false; 语句。

Answer 1

尝试使用 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;
     }
});

});