Question

我的页面上有两个表单，当焦点设置为其中一个表单时，我希望用户只能选中当前表单。

这是html的样子：

<html>
<head>
<script type="text/javascript">
  $(document).ready(function(){ 
    $('form').each(function() {                                
      obj = jQuery(this);
      obj.find('input:last').keydown(function(e) {                       
        if (e.keyCode == 9 && !e.shiftKey) {                       
          e.preventDefault();                                
          obj.find('input:first').focus();                   
        }
      })                                      
      obj.find('input:first').keydown(function(e) {                      
        if (e.keyCode == 9 && e.shiftKey) {                        
          e.preventDefault();                                
          obj.find('input:last').focus();                    
        }
      })
    })
  })
</script>
<body>
  <form>
    <input id="1" />
    <input id="2" />
  </form>
  <form>
    <input id="3" />
    <input id="4" />
  <form>
</body>
</html>

按下标签时，从id 1开始，标签顺序如下所示：

1 <tab> 2 <tab> 3 <tab> 4 <tab> 3 <tab> 4 <tab> ...

从id 2：

开始按shift + tab

2 <shift> + <tab> 1 <shift> + <tab> 4 <shift> + <tab> 3 <shift> + <tab> 4 <shift> + <tab> 3 ...

我希望发生的事情是，当你在id 1：

时

1 <tab> 2 <tab> 1<tab> 2 <tab> ...

倒退：

1 <shift> + <tab> 2 <shift> + <tab> 1 ...

为什么Tab键顺序包含在最后一个表单上，而不是第一个表单上的任何想法？

Answer 1

以下是解决方案：

替换

obj.find('input:first').focus();

与

$(this).closest('form').find('input:first').focus();

并替换

obj.find('input:last').focus();

与

$(this).closest('form').find('input:last').focus();

它无法正常工作的原因是因为obj的值在.each()第二次运行时发生了变化。

Answer 2

你显然已经解决了我之前遇到过类似问题的问题，并提出了限制TAB（shift + TAB）影响字段的小插件。我希望它可以帮助有类似问题的人，因为这似乎很常见。

只需使用它：

$(".someGroup").tabGuard();

或在你的情况下

$($("form")[0]).tabGuard();
$($("form")[1]).tabGuard();

这将使tab只迭代一个表单内的字段，具体取决于焦点。这样，您可以对页面上的各个字段组进行分组，如果有意义，焦点对应的字段将继续在TAB或Shift + TAB上进行迭代。在这里找到它：

http://tomaszegiert.seowebsolutions.com.au/tabguard/index.htm

使用div（jQuery）包装Tab键顺序

2 个答案: