11

いくつかのドロップダウンメニューからの選択に基づいて表示されるいくつかのオーバーレイ（ライトボックスタイプ）を含む複雑なページがあります。これはjQueryで行われます。目標は、ユーザーがキーボードを介してオーバーレイ上の要素（ライトボックスdivの上に配置されている）のみをタブで移動できるように制限することです。つまり、タブシーケンスから以下のページ要素を削除します。

javascriptまたはjQueryを使用して、以下のすべての要素にtabindex = "-1"属性を設定できることを認識しています。これは機能しますが、大きな欠点が1つあります。

問題は、プロジェクトで、以下の要素の一部に、デフォルトのブラウザタブインデックス以外の特定のタブインデックスが必要になる場合があることです。以下の要素に既存のタブインデックス属性が設定されている場合、それらをすべて「-1」に設定すると、それらは失われます。

それで、タブのインデックスをオーバーレイdivだけに制限する他の方法があるのか​​、それともこれを解決するために考えていなかった別のアプローチがあるのか​​疑問に思っています。これは私の制作時間を殺しているので、どんな助けでも大歓迎です！

4

4 に答える 4

10

これは、tabindex をグローバルに使用する必要のない問題に対する簡単な解決策です。(jQuery を使用)。Firefox、Chrome、Safari、Opera、IE9、IE8、IE7で確認しました。うまくいくようです。

function tabFocusRestrictor(lastItem,firstItem){
    $(lastItem).blur(function(){
        $(firstItem).focus();
    });
}

tabFocusRestrictor('#clsButton','#firstItemInSequence');

そのため、オーバーレイの html 入力フィールドはおおよそ次のようになります。

<form>
  <input type="text" id="firstItemInSequence" />
  <input type="text" id="secondItemInSequence" />
  <input type="text" id="thirdItemInSequence" />
  <button id="clsButton">close</button>
</form>

これにより、ボタンからタブを離すなどのぼかしを除いて、ボタンは通常どおりに機能し、指定された入力フィールド、この場合は「firstItemInSequence」の id を持つフィールドに移動します。

于 2012-07-06T15:19:39.440 に答える
1

別の解決策。この関数は、tabIndex = maxindexのコントロールでTabキーを押した後、id=controlIDのコントロールにフォーカスを与えます。これにより、TABを押すと円運動が発生します。

それはに位置するでしょう：

<body class="body" onkeydown="return onKeyDownTab(event, 7,'txtName');">


function onKeyDownTab(event, maxIndex, controlFocusID)
{

    var key = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
    if (key == 9)
    {
        try
        {
            if (event.srcElement.id == "" || event.srcElement.className.indexOf("body") > -1)
            {
                document.getElementById(controlFocusID).focus();
                return false;
            }
            if (parseInt(event.srcElement.attributes.tabIndex.value) < 0 || parseInt(event.srcElement.attributes.tabIndex.value) >= maxIndex)
            {
                document.getElementById(controlFocusID).focus();
                return false;
            }
            return key;
        }
        catch (e)
        {
            return false;
        }        
    }
    else
    {
        return key;
    }
};
于 2013-01-24T19:44:37.313 に答える
0

jSFiDDLE

$(document).ready(function() {
lastIndex = 0;
$(document).keydown(function(e) {
    if (e.keyCode == 9) var thisTab = $(":focus").attr("tabindex");
    if (e.keyCode == 9) {
        if (e.shiftKey) {
            //Focus previous input
            if (thisTab == startIndex) {
                $("#" + tabLimitInID).find('[tabindex=' + lastIndex + ']').focus();
                return false;
            }
        } else {
            if (thisTab == lastIndex) {
                $("#" + tabLimitInID).find('[tabindex=' + startIndex + ']').focus();
                return false;
            }
        }
    }
});
var setTabindexLimit = function(x, fancyID) {
        console.log(x);
        startIndex = 1;
        lastIndex = x;
        tabLimitInID = fancyID;
        $("#" + tabLimitInID).find('[tabindex=' + startIndex + ']').focus();
    }
/*Taking last tabindex=10 */
setTabindexLimit(10, "Selector_With_Where_Tab_Index_You_Want");
});

setTabindexLimit()関数 Div の最後の Tabindex である 2 つの属性10とSelector_With_Where_Tab_Index_You_Wantは、tabindex を繰り返す div のクラスまたは ID です。

于 2014-02-14T16:33:16.537 に答える