1

複数の質問があるクイズがあります。一度に1つだけ表示されます。ただし、ユーザーがページをタブで移動する場合、クイズはタブの順序の一部になります。

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;
    }  
});
4

3 に答える 3

0

これを試して：

//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();
    }
});​
于 2012-07-24T10:45:31.500 に答える
0

これを見てください：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>

于 2012-07-24T10:22:23.377 に答える
-1

私は完全なソリューションビンを作成しました。だから、ここで私は以下のようにデモリンクを配置しました：

デモ： 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

于 2012-07-24T11:33:35.323 に答える