How to get the last (max) tabindex, from an html form, using jQuery

Question

How to get the last (max) tabindex, from an html form, using jQuery

Navigation

#1 by (3 votes)
#2 by (1 votes)

2

I need to get the last 'tabindex' of a form when the user clicks 'tab' or 'enter' back to the first one.

Follow the current code:

$(':input').keydown( function(event) {

    if ( (event.which === 13 || event.which === 9) && !event.shiftKey ) {
        node = $(this);
        currentIndex = node.attr('tabindex');
        // if ( currentIndex > 0 ) {
        if ( currentIndex > 0 && currentIndex < **MAX_TABINDEX** ) 
            event.preventDefault();
            currentIndex++;
            $('[tabindex=' + currentIndex + ']').focus();
            $('[tabindex=' + currentIndex + ']').select();
        } else {
            $('[tabindex=1]').focus();
            $('[tabindex=1]').select();
        }    
    }

Any ideas?

html jquery

asked by anonymous 28.05.2015 / 19:23

2 answers

1

Here you assemble an array of tabs

 var size=$('#ui-tabs >ul >li').size();

Soon the last one will be the size -1;

28.05.2015 / 19:39

How to pass arguments when running program by Netbeans? Adding multiple select count results in MYSQL

score 3 · Accepted Answer

You can check if the last element is in the focus, if yes, press TAB or ENTER to focus first. Example:

$(':input').keydown( function(event) {
  if ( (event.which === 13 || event.which === 9) && !event.shiftKey ) {
    var idx = $(':input').index(this) + 1; //index atual
    var idx_total = $(':input').length; // index do ultimo
    event.preventDefault();
    if (idx == idx_total) { // se for o ultimo volta pro primeiro
      $('input:eq(0)').focus();
    }
    else {
      $('input:eq('+idx+')').focus(); // senao focus no proximo
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><p><inputid="entrada1" type="text"></input></p>
<p><input id="entrada2" type="text"></input></p>
<p><input id="entrada3" type="text"></input></p>
<p><input id="entrada4" type="text"></input></p>