javascript/jqueryを使用して特定のdivにフォーカスをロックする方法

Question

私はjQueryを使用して何らかの種類のモーダルポップアップを開発しており、焦点にいくつかの問題があります。

タブキーを押すと、ポップアップの背後に隠れているコントロールにフォーカスが移動します。

フォーカスを強制的にポップアップウィンドウのコントロールに残す方法はありますか？

Answer 1

は最後に、私は次の解決策になってしまいました窓。

次に、これらの要素のすべてについて、tabindexを-1に設定して、タブキーでアクセスできないようにします。

ウィンドウが閉じられると、すべてのタブインデックスが以前の値に復元されます。

Answer 2

あります。タブキーが押されたときには、基本的にそれを聞いて、それに応じて対応する必要があります。 jQueryの使用、ここでは一般的な構造です：

$(window).keydown(function(e){ 
    if(e.which ===9){ //it's the tab key! 
     //do whatever you want here. 

     e.preventDefault(); 
    } 
}); 

あなたは、私がdo whatever you want hereをコメントしてカスタムコードを入れて、e.preventDefaultで（例えば、非表示のコントロールにフォーカスをジャンプなど）デフォルトのアクションを阻止することにより仕上げます。

Answer 3

tabキーのデフォルトのアクションをいつでも削除することができます。これを行う方法に関する小さなチュートリアルがあります。here

しかし、それはenterとtabキーのですが、あなたはまた、hereを見れば、あなたは我々だけtabキーのデフォルトアクションを削除するには、コードを変更した場合tabキーだからキー番号9であることがわかりますあなたの行ではなく

if (key == 9) { } 

のようなものだろう

if (key == 3 || key == 9 || key == 13) { } 

EDIT

さて、あなたはtabキーのデフォルトのアクションを防ぐのではなく、そのキーがモーダルウィンドウの下の要素に集中するのを止めたいと述べたので、

ここで私が考えることができるのは、ユーザが最後のフィールドに集中しているかどうかを確認することです。example 1/example 2（これを最後の入力/テキストエリア/チェックボックス/ラジオにリンクします）。もしそうなら、あなたは2つのうちの1つを実行することができます：

1）上記のコードを使用して、デフォルトのアクションを防止して、モーダルの下の要素に焦点を合わせることを停止します。

OR

2）私の知る限り見ることができるようにfirst_field.focus();

で、あなたのモーダルウィンドウの最初のフィールドにバックフォーカスは、あなたの条件に固執することにより、第2の選択肢は、あなたのための最良の選択肢です。

Answer 4

Try hereユーザーがタブを押さないようにするか、フィールドをループしてタブインデックスを設定する必要があります。ウィンドウが開いているとき、私はjQuery.data内部のポップアップウィンドウ内のすべての要素ではないためtabindexesを保存して、私はの最初の要素にフォーカスを設定

：

Answer 5

イベントが発生したときにすべての入力タグにフォーカスが追加されたジェネリックを使用します。親divのZ-インデックスが所定のしきい値（たとえば9950）を超えている場合、以下の場合、私は焦点を避ける。フォーカスを避けるために、私は適切なdiv内でコントロールを見つけて、そのアイテムの.focus（）を呼び出すことによってこれを行います。

下記の擬似コード。

$('input').bind('focus', function() 
{ 
if ($(this).parents('div:first').css('z-index') < 9950) 
{ 
    //prevent focus here 
    //usually by finding a suitable target and setting focus 
    $('input:first', $('.myModalClass')).focus(); 
} 
}); 

ps。また、 "モーダル"ウィンドウ内のアイテムがタブインデックス内で互いに重なるように、アイテムにtabindexを設定します。ちょうど少しクリーナーを作る

Answer 6

私は同様の問題を抱えていて、この小さなjQUeryUIプラグインを作成しました。これを（必要に応じてページ上の複数の場所で）単純に使用すると、TABまたはshift + TABが.someGroupラッパーの内部でのみ繰り返されます。

$（ "。someGroup"）。tabGuard（）;私はタブを無効にするか無効にする/他の要素を追跡する必要が関与していない、あなたの問題へのよりよい解決策を持っているかもしれないと思う

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

Answer 7

：

ここではより多くの、私はそれが誰かを助けることを願っています。それはjQueryUIを必要とします。

<div id="modalBgCover"> 
    <div onfocus="$(this).next('div').find(':tabbable').last().focus();" tabindex="0"></div> 
    <div id="modal"> 
     <input id="input1"> 
     <input id="input2"> 
    </div> 
    <div onfocus="$(this).prev('div').find(':tabbable').first().focus();" tabindex="0"></div> 
<div> 

これは、フォーカスを受け取り、リダイレクトする2つのタブ可能な（コンテンツは表示されないので表示されない）divを作成します。

最後の入力をタップして下部のdivに移動すると、そのモード内の最初のtabbable要素にフォーカスが戻され、同様にshift +上部のdivに移動すると、モーダルの下部入力にフォーカスが戻されます。

modalBgCoverは、ページを半透明レイヤーでオーバーレイし、クリックが通過しないようにします。

Answer 8

私はこの記事の回答を含む知識を収集することに基づいてミニフレームワークを実装しました。

JQuery UIを使用します。

改善を歓迎します。ここで

は、フレームワークのオブジェクトです：

var TabLim = {}; 

TabLim.activate = function(el) { 
    TabLim.deactivate(); 

    TabLim._el = el; 

    $(window).on('keydown', TabLim._handleTab); 

    return TabLim; 
}; 

TabLim.deactivate = function() { 
    TabLim._el = null; 

    // detach old focus events 
    TabLim._detachFocusHandlers(); 

    TabLim._els = null; 
    TabLim._currEl = null; 

    $(window).off('keydown', TabLim._handleTab); 

    return TabLim; 
}; 

TabLim.setFocus = function(prev) { 
    // detach old focus events 
    TabLim._detachFocusHandlers(); 

    // scan for new tabbable elements 
    var tabbables = TabLim._el.find(':tabbable'); 
    TabLim._els = []; 

    // wrap elements in jquery 
    for (var i = 0; i < tabbables.length; i++) { 
     var el = $(tabbables[i]); 
     // set focus listener on each element 
     el.on('focusin', TabLim._focusHandler); 
     TabLim._els.push(el); 
    } 

    // determine the index of focused element so we will know who is 
    // next/previous to be focused 
    var currIdx = 0; 
    for (var i = 0; i < TabLim._els.length; i++) { 
     var el = TabLim._els[i]; 

     // if focus is set already on some element 
     if (TabLim._currEl) { 
      if (TabLim._currEl === el[0]) { 
       currIdx = i; 

       prev ? currIdx-- : currIdx++; 
       break; 
      } 

     } else { 
      // focus is not set yet. 
      // let's set it by attribute "autofocus". 
      if (el.attr('autofocus') !== undefined) { 
       currIdx = i; 
       break; 
      } 
     } 
    } 

    if (currIdx < 0) { 
     currIdx += TabLim._els.length; 
    } 
    if (TabLim._els.length) { 
     TabLim._els[Math.abs(currIdx % TabLim._els.length)].focus(); 
    } 

    return TabLim; 
}; 

TabLim._handleTab = function(e) { 
    if (e.which === 9) { 
     e.preventDefault(); 

     TabLim.setFocus(e.shiftKey); 
    } 
}; 

TabLim._focusHandler = function(e) { 
    TabLim._currEl = e.currentTarget; 
}; 

TabLim._detachFocusHandlers = function() { 
    if (TabLim._els) { 
     for (var i = 0; i < TabLim._els.length; i++) { 
      TabLim._els[i].off('focusin', TabLim._focusHandler); 
     } 
    } 
}; 

それを使用する方法：

1）特定のdiv要素に焦点を当て

TabLim.activate($('.yourDic')).setFocus(); 

2を制限するためにアクティブにする）

TabLim.deactivate(); 

を無効にします

Answer 9

モーダルポップアップウィンドウ最初に「タブ」キーを押したときに最初の入力に焦点を合わせようとすると、非常に単純な解決策はモーダルポップアップウィンドウの最初の入力にフォーカスを置くだけです。同じ入力に対してblur（）を実行します。その後、 "タブ"を押すと、そのフォームに焦点が当てられます。

$("#modalTestInput").focus(); 
$("#modalTestInput").blur(); 

あなたはモーダルポップアップウィンドウの後ろの入力に集中するすべての機能を削除しようとしている場合は、あなたのモーダルポップアップの外側の入力にtabindex = "-1"を適用するには、あなたのソリューションは、間違いなく行く方法です。

単純なソリューションに興味があると思っています。