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.