Javascript 为容器中的第一个元素提供焦点时出现问题

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

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

可以找到样本

完整的代码是

脚本

CSS

HTML

1.

任何帮助都将不胜感激

谢谢

编辑

---

谢谢大家。问题解决了。这是因为缺少

返回false语句。
您不能在html中仅使用tabindex属性吗

如果您的页面是动态的，那么使用JS设置此属性可能比捕获按键等更容易。
尝试按键而不是按下键

还返回false，以便取消按键正常处理

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

似乎发生的是，您正在移动焦点，然后选项卡开始移动，将其移动到选择位置。您需要设置焦点，然后返回false，以便取消常规选项卡

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

}))
 您的示例不起作用，因为您没有停止击键，您将焦点设置在第一个元素上，然后发送tab键，这将导致焦点更改为第二个元素

尝试：

检查上面的示例。
但我将在稍后阶段取消绑定此
按键
事件。因此，我认为使用
tabIndex
将影响容器外部的控件。
<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>

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

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