jquery - 禁用整个 div 上的选项卡

Question

我有一个包含多个问题的测验.. 一次只显示一个。但是，如果用户在页面上使用标签，则测验将与标签顺序分开。

设置 tabindex="-1" 不适用于所有浏览器.. 还有其他方法吗？jQuery？我需要它以某种方式跳过整个 div ......

注意：我试过这个：

$('.quiz').live('keydown', function(e) {
    var keyCode = e.keyCode || e.which; 
    if (keyCode == 9) { 
        e.preventDefault();
    }
});

但它没有工作..：/

这也没有：

$('.quiz').bind('focusin', function() {
    var keyCode = e.keyCode || e.which;
    if (keyCode == 9) { 
        e.preventDefault();
        return false;
    }  
});

Answer 1

Try this:

//Set tabindex = -1 for all div childs
var divChilds = $('.quiz').find("*");
$.each(divChilds , function(i, elem){
    $(elem).attr("tabindex", -1);
});

//cancel tab click
$('.quiz').keydown(function(e) {
    var keyCode = e.keyCode || e.which; 
    if (keyCode == 9) { 
        e.preventDefault();
    }
});​

Answer 2

看看这个：http: //jsfiddle.net/albertjan/5X5LH/12/

js

$(window).keydown(function(e) {
    var keyCode = e.keyCode || e.which; 
    if (keyCode == 9) { 
        if ($(e.target).is('.quiz *')) {
            e.preventDefault();
        } else {
            wastab = true;
        }
    }
});

$('.quiz input').focus(function(){
    if (wastab){
        wastab = false;    
        $('#not-in-quiz').focus();
    }
});

​</p>

Answer 3

我已经完成了完整的解决方案箱。所以，我在这里放置了演示链接，如下所示：

演示： http ://codebins.com/bin/4ldqp9r

HTML：

<div id="panel">
  <div class="quiz">
    <span class="header">
      Div-1
    </span>
    <p>
      Question-1? 
      <input type="text" tabIndex="1" />
    </p>
    <p>
      Question-2? 
      <input type="text" tabIndex="2" />
    </p>
    <p>
      Question-3? 
      <input type="text" tabIndex="3" />
    </p>
  </div>
  <div class="quiz">
    <span class="header">
      Div-2
    </span>
    <p>
      Question-4? 
      <input type="text" tabIndex="4" />
    </p>
    <p>
      Question-5? 
      <input type="text" tabIndex="5" />
    </p>
    <p>
      Question-6? 
      <input type="text" tabIndex="6" />
    </p>
  </div>
</div>

CSS：

.header{
  border-bottom:1px solid #445599;
  display:block;
  background:#447797;
  padding:0px;

}
.quiz{
  background:#bbaadd;
  border:1px solid #445599;
  padding:2px;
  display:inline-block;
}
.quiz input{
  border:1px solid #113388;
}
.quiz input:focus{
  background:#d98866;
}

查询：

$(function() {
    $(".quiz:first input:first").focus();
    $(".quiz input").keypress(function(e) {
        var keyCode = e.keyCode || e.which;
        if (keyCode == 9) {
            e.preventDefault();

            if ($(this).parents(".quiz").next().find("input:first").length > 0) {
                $(this).parents(".quiz").next().find("input:first").focus();

                /*
              //OR Another way to find next input selector is:
              $(this).closest(".quiz").next().find("input:first").focus(); 
              */

            } else if ($(this).parents(".quiz").prev().find("input:first").length > 0) {
                $(this).parents(".quiz").siblings(".quiz:first").find("input:first").focus();

                /*
              //OR Another way to find next input selector is:
              $(this).closest(".quiz").siblings(".quiz:first").find("input:first").focus(); 
              */
            }
        }

    });
});

演示： http ://codebins.com/bin/4ldqp9r