2011-08-30 15 views
30

私は、キーボードの上にTABを使用する場合、カーソルは1から4まで行く(1→2→3→4)TABナビゲーションからフォーム要素をスキップする方法は?

どのように私は数3をスキップすることができますか?私は1→2→4

<table> 
    <tr><td> <input type="text" value="1"></td><td><input type="text" value="2"></td></tr> 
    <tr><td> <input type="text" value="3"></td><td><input type="text" value="4"></td></tr> 
</table> 
LIVE

を行くたいと思います:あなたはtabindex属性を設定した場合http://jsfiddle.net/49Vca/

+0

マウスで選択できますが(3)、タブキーでは選択できませんか? 矢印、または直接アクセス(キーボードの値を押す)はどうですか? – Pierre

答えて

55

を見てください "-1" #の入力自体に3、あなたは...要素のIDを与え、これらのライン上のスクリプトを書く#3

1

にタブにできなくなります

function changeTabIndex() 
    { 
    document.getElementById('1').tabIndex="1" 
    document.getElementById('2').tabIndex="2" 
    document.getElementById('3').tabIndex="-1" 
    document.getElementById('4').tabIndex="3" 
    } 
</script> 
+2

なぜスクリプトで設定しますか?意味がありません。 – Tomalak

+0

opにはjavascriptとjQueryというタグが付いていたので、jsを使って同じことをする必要があると思っていました......私の悪い – jayanth

+0

... OPは考えられるすべてのタグでタグ付けしています。 :)しかし、はい、そのPOVから答えは有効です。+1 – Tomalak

1

を使用している場合は、SkipOnTabを試してみてください。

SkipOnTab:選択したフォームフィールドを順方向タブ順から除外するjQueryプラグイン。

スキップする要素(またはコンテナ)にdata-skip-on-tab="true"を追加するだけです。クリックしてフォーカスを合わせたり、シフト - タブを使用して戻ることができます。あなたのケースでは

<table> 
    <tr><td> <input type="text" value="1"></td><td><input type="text" value="2"></td></tr> 
    <tr><td> <input type="text" value="3" data-skip-on-tab="true"></td><td><input type="text" value="4"></td></tr> 
</table> 

the simple demothe business case demoを参照してください。 try the forked jsfiddle with SkipOnTabでもかまいません。

+0

downvoter:純粋なHTML 'tabindex =" - 1 "'とまったく同じことをするのではなく、機能性(予測可能な順序、シフトタブ)を追加するプラグインを構築しました。 https://github.com/joelpurra/skipontab/wiki/SkipOnTab-versus-tabindexを参照してください。 –

0

理由が3つある必要があると仮定すると、要素が入力コントロールであり、タブオーダーの一部として残す必要があるMVCビューや、コントローラにデータを戻さないMVCビューなど、おそらく双方向でそれをスキップすることはできませんし、方法を見つけたら、ブラウザをW3のタブに関する仕様に準拠させるために警告なしにパッチを当てるバグに依存します注文。

順方向または逆方向のいずれかでスキップするには、onfocusin()イベントハンドラを要素3に追加します。このハンドラは、その直前または直後の要素でfocus()を呼び出します。 onfocusイベントがイベントパラメータ(event.relatedTargetなど)で以前にフォーカスされたコントロールを渡すことがまだ許可されている場合、フォーカスが次の要素から来た場合、前にフォーカスされた要素が何であるかを知ることができ、ただし、W3仕様では、これが準拠した動作ではないことが明らかになり、HTML5準拠のブラウザではevent.relatedTargetにnullを渡し、focus()イベントハンドラがfocus()イベントハンドラまたはblur()イベントハンドラがクライアント側コードで呼び出される前に、そのようなフィールドを特に無効にします。

関連する問題