Jump from one input to another without using tabindex

Question

Jump from one input to another without using tabindex

Navigation

#1 by (2 votes)

0

I have the following code that makes me jump from one input to another through a tabindexgt attribute, but only jumps among those that have that attribute if there is another input with another attribute that jumps. How can I do to jump from one input to another without having the same attribute?

Thank you very much

<Input size="4" tabindexgt="1">
<Input size="4" tabindexdxfiltro="1">
<Input size="4" tabindexgt="2">

$(Window).on('keydown', null, 'Tab', función (event) { 
Event.preventDefault();
Var elemnt, index;
     elemnt = $(event.target);
     If (elemnt.attr('tabindexgt' !== Undefined)) {
          Index == parseInt(elemnt.attr('tabindexgt'));
          If(Index == $('[tabindexgt]:visible').length){
               Index = 0;
          }
          If(!!!$('.ui-autocomplete.ui-widget:visible').length {
              $('[tabindexgt=" ' + (Index + 1).toString() + ' "]'.focus();
          }
     }
 });

javascript jquery jquery-ui

asked by David Roberto 27.11.2017 в 17:41

source

1 answer

belongsTo error in AppServiceProvider Distinguish the "undefined" value of typeof from a non-existent variable of a defined one with the value undefined

score 2 · Accepted Answer

If you want the Tab key to scroll through the inputs (regardless of the attribute tabindexdxfiltro or tabindexgt you could - at the beginning - assign an attribute data-index to each input element. Tab on one input, move on to the next, or on the first one if you made Tab on the last one.

$(document).find('input').each(function(index) {
  $(this).data('index',index);
});
$(document).on('keydown', 'input',  function (event) {
  $index=$(this).data('index');
  if(event.key==='Tab') {
    event.preventDefault();
    if($index=== $(document).find('input').length-1) {
      $(document).find('input').eq(0).focus();
    } else {
      $(document).find('input').eq($index+1).focus();
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input size="4" tabindexgt="1" >
<input size="4" tabindexdxfiltro="1" >
<input size="4" tabindexgt="2" >

<input size="4" tabindexgt="3" >
<input size="4" tabindexdxfiltro="2" >
<input size="4" tabindexgt="4" >