Geek Answers Handbook

How to set tab order in jquery

I use Telerik controls, in particular, a numeric text field in which you can set the up arrow to increase / decrease the values ​​in the text field. I need to set the tab order to go to the next field, but since there is a button on the up arrow, the browser will go through these buttons and then go to the next field of the text field.

How do you set jquery to detect the next visible textbox input field / popup menu / etc and go to it when you click the tab button instead of scrolling the buttons next to it?

+5
source share
4 answers
$(function() {
  var tabindex = 1;
  $('input,select').each(function() {
     if (this.type != "hidden") {
       var $input = $(this);
       $input.attr("tabindex", tabindex);
       tabindex++;
     }
  });
});
+17
source

HTML tabindex, . , , , tabindex=1, tabindex=2, . , , tabindex .

+4

You can also try this.

$('input,select :visible').each(function (i) { $(this).attr('tabindex', i + 1); });
+2
source

Sometimes, when you generate code or reorder items using jQuery, the solution should not use taborder, but just make sure you put the items in the DOM in the correct order. See the example below.

JQuery code::
var anchorB = jQuery('#anchorB');
jQuery('#divB').remove();
anchorB.insertBefore( "#anchorC" );


Before::
<a id="anchorB" href="#">Anchor B</a>
<a id="anchorA" href="#">Anchor A</a>
<a id="anchorC" href="#">Anchor C</a>

After::
<a id="anchorA" href="#">Anchor A</a>
<a id="anchorB" href="#">Anchor B</a>
<a id="anchorC" href="#">Anchor C</a>
+1
source

More articles:


All Articles