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

看看这个：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();
    }
});

Answer 2

试试这个：

//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 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;
}

<强> JQuery的：

$(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

禁用整个div上的Tab键

3 个答案: