Désactiver la touche de tabulation sur un div

J'ai la structure suivante:

<div id="wrapper"> <div id="div1">Some content</div> <div id="div2">Some content</div> </div>

Je veux "désactiver" la touche de tabulation sur div2, je veux dire que les éléments de div2 ne recevront pas de mise au point lorsque la touche de tabulation est enfoncée.

Existe-t-il un moyen simple de créer ce bloqueur de clé de tabulation à l'aide de javascript / jquery?

@John Strickler a raison. Le comportement de la touche tab peut être modifié avec l'attribut tabindex. C'est l'ordre dans lequel les éléments se concentreront.

Avec <div id="div1" tabindex="-1">Some content</div> vous devez éviter que l'accent soit mis sur votre div.

Plus d'informations ici: http://www.htmlcodetutorial.com/forms/_INPUT_TABINDEX.html

Il existe une façon assez simple de le faire en utilisant la méthode focus() de jQuery. Compte tenu de ce qui suit, simplifié, html:

 <div id="first"> <label for="first">Can tab to this input</label> <input type="text" id="first" /> </div> <div id="second"> <label for="second">Can't tab to this input</label> <input type="text" id="second" /> </div> <div id="third"> <label for="third">Can tab to this input</label> <input type="text" id="third" /> </div>

Et le jQuery:

 $('#second input').focus( function(){ $('#third input:first').focus(); });

Démo de JS Fiddle .

C'est toutefois légèrement sur-simplifié. Si vous publiez votre marquage exact, nous pourrions vous proposer quelque chose de plus … sur mesure?

En outre, dans la mise en œuvre ci-dessus, empêche l' input se concentrer via l'événement de clic, ainsi que l' onglet , ce qui réduit l'utilité, j'imagine.

Modifié pour réviser le code ci-dessus, pour différencier l'accent du clic-souris et de l'onglet du clavier:

 $('#second input').bind('keyup mouseup', function(e){ if (e.which == 9) { // focus from tab $('#third input:visible:first').focus(); } else if (e.which == 1) { // focus from click return false; } else { alert('God only knows, what buttons are you mashing..?'); } });

Démo de JS Fiddle révisé .