4

Quisiera saber cómo puedo cambiar el focus entre dos inputs que están en diferentes <div> con las flechas derecha e izquierda usando javascript/jquery, aquí el código:

<div class="table-section" id="IpatCOp1-2">     
  <div class="md-form">
    <label class="label-input" for="IpatCOp1-org">No.</label>
    <input type="text" class="input" size="10" maxlength="8" id="IpatCOp1-org" tabindex="10"/>
  </div>
  <div class="md-form w-50">
    <label class="label-input" for="nomorganismo">NOMBRE</label>
    <input type="text" id="nomorganismo" class="w-100 input" tabindex="-1"/>
  </div>
</div>

Gracias.

2
  • Ten en cuenta que con esto estarás perjudicando gravemente la accesibilidad de tu aplicación, haciendo así que cuando estas en un input y escribes algo no te puedas mover por la cadena con las flechas.
    – x3k
    Commented el 17 sept. 2019 a las 9:21
  • Hola @x3k_js tienes razón, sin embargo es requerimiento del usuario, gracias por tu comentario.
    – despitiabe
    Commented el 18 sept. 2019 a las 23:08

2 respuestas 2

2

Para moverte por los inputs a través de las teclas direccionales (right y left, también puede funcionar con up y down) puedes emplear jquery a través del evento keyup y una función que encuentre el siguiente o anterior elemento del input actual.

En este ejemplo en caso de llegar al limite se regresa al primero o al ultimo según el caso:

$(function() 
{
  $('.input').keyup(function(e) {
    if(e.keyCode==37)//38 para arriba
      mover(e,-1);
    if(e.keyCode==39)//40 para abajo
      mover(e,1);
  });
});


function mover(event, to) {
   let list = $('input');
   let index = list.index($(event.target));
   index = (index + to) % list.length;
   list.eq(index).focus();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table-section" id="IpatCOp1-2">     
  <div class="md-form">
    <label class="label-input" for="IpatCOp1-org">No.</label>
    <input type="text" class="input" size="10" maxlength="8" id="IpatCOp1-org" tabindex="10"/>
  </div>
  <div class="md-form w-50">
    <label class="label-input" for="nomorganismo">NOMBRE</label>
    <input type="text" id="nomorganismo" class="w-100 input" tabindex="-1"/>
  </div>
  <div class="md-form w-50">
    <label class="label-input" for="nomorganismo">input3</label>
    <input type="text" id="input3" class="input" tabindex="-1"/>
  </div>
  <div class="md-form w-50">
    <label class="label-input" for="nomorganismo">input4</label>
    <input type="text" id="input4" class="w-100 input" tabindex="-1"/>
  </div>
</div>

En este ejemplo solo se puede navegar hasta los limites hacia arriba y abajo:

$(function() 
{
  $('.input').keyup(function(e) {
    if(e.keyCode==37)//38 para arriba
      mover(e,-1);
    if(e.keyCode==39)//40 para abajo
      mover(e,1);
  });
});


function mover(event, to) {
   let list = $('input');
   let index = list.index($(event.target));
   index = Math.max(0,index + to);
   list.eq(index).focus();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table-section" id="IpatCOp1-2">     
  <div class="md-form">
    <label class="label-input" for="IpatCOp1-org">No.</label>
    <input type="text" class="input" size="10" maxlength="8" id="IpatCOp1-org" tabindex="10"/>
  </div>
  <div class="md-form w-50">
    <label class="label-input" for="nomorganismo">NOMBRE</label>
    <input type="text" id="nomorganismo" class="w-100 input" tabindex="-1"/>
  </div>
  <div class="md-form w-50">
    <label class="label-input" for="nomorganismo">input3</label>
    <input type="text" id="input3" class="input" tabindex="-1"/>
  </div>
  <div class="md-form w-50">
    <label class="label-input" for="nomorganismo">input4</label>
    <input type="text" id="input4" class="w-100 input" tabindex="-1"/>
  </div>
</div>

Construí la función mover() en base a este código, créditos a su autor.

Espero sea lo que estas buscando, saludos.

0
1

Estuve usando esta función:

 $(".table-section").keydown(function (e) {
  var items = $(this).find('.input'),
  activo = document.activeElement;
  
  if (e.which == 39) {
    //ciclo for que valida si NO es el último 
    for (var i = 0; i < items.length - 1; i++) {
      if(activo === items[i]){
        items[i + 1].focus();
      }
    }
  }
  if (e.which == 37) {
    //ciclo for que valida si NO es el primero
    for (var i = 1; i < items.length; i++) {
      if (activo === items[i]) {
        items[i - 1].focus();
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table-section">     
  <div class="md-form">
    <label class="label-input">No.</label>
    <input type="text" class="input" size="10" maxlength="8" tabindex="10"/>
  </div>
  <div class="md-form w-50">
    <label class="label-input">NOMBRE</label>
    <input type="text" class="w-100 input" tabindex="-1"/>
  </div>
  <div class="md-form w-50">
    <label class="label-input">input3</label>
    <input type="text" class="input" tabindex="-1"/>
  </div>
  <div class="md-form w-50">
    <label class="label-input">input4</label>
    <input type="text" class="w-100 input" tabindex="-1"/>
  </div>
</div>

2
  • Se ve interesante, aunque produce error al llegar a los limites, habría que corregir ese detalle. Commented el 18 sept. 2019 a las 23:51
  • Ya está corregido para que no no valide el anterior si es el primero o el siguiente si es el último. Saludos.
    – despitiabe
    Commented el 8 oct. 2019 a las 15:49

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.