代码之家 › 专栏 › 技术社区 › rahul

关注容器中的第一个元素的问题

focus jquery javascript

rahul · 技术社区 · 14 年前

我只是想在按下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>

任何帮助都将不胜感激。

谢谢

编辑

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

3 回复 | 直到 14 年前

Russell Steen 14 年前

试着用按键代替按键

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

出现的情况是,您正在移动焦点,然后出现选项卡,并将其移动到选择项。您需要设置焦点,然后返回false,以便取消常规选项卡。

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

});

Christian C. Salvadó 14 年前

您的示例不起作用,因为您没有停止击键,而是将焦点设置在第一个元素上,然后发送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 .