Question

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

我已经完成了一个样本，它无法正常工作，我无法弄清楚这个问题。

可以找到示例 here

完整的代码是

脚本

$(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，以便取消按键正常处理。

似乎正在发生的事情是你移动焦点然后选项卡发生，将其移动到选择。你需要setfocus，然后返回false，以便取消常规标签。

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

}）;

Answer 2

您的示例无效，因为您没有停止击键，您将焦点设置在第一个元素上，然后发送Tab键，这会导致焦点更改为第二个元素。

尝试：

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

检查上面的示例here。

Answer 3

你能不能只使用html中的tabindex属性？

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

将焦点放在容器内的第一个元素的问题

3 个答案: