Lo que estoy tratando de lograr es que cuando se presiona la tecla de tabulación, el cursor se enfocará en la siguiente entrada vacía en un componente de cuadrícula. Se omitirá el campo de entrada que tenga valor. Si el cursor está actualmente en el campo de entrada 2, y el campo de entrada 3 tiene valor, cuando se presiona la pestaña, el cursor saltará al campo de entrada 4. Esto es para acelerar el tiempo de entrada del formulario.
A continuación se muestra el componente de cuadrícula html que he creado.
<div class="col-md-6" id="dcNonRetainValue"> <fieldset class="ES-border frame-height-collapsed"> <legend class="ES-border">{{ 'Data Collection' }} </legend> <collect-paged-data data="ui.dataCollectionItems" currentPage="ui.dataCollectionItemsCurrentPage" pageSize="ui.dataCollectionPageSize"> </collect-paged-data> </fieldset>Intentando enfocar el siguiente elemento de entrada con js.
setTimeout(function () { $('#dcNonRetainValue *:input:empty').focus(); }, 50);No parece funcionar correctamente. Cualquier comentario es apreciado.
Puede usar la función de filter para seleccionar todas las entradas vacías. Luego use la función eq para seleccionar la primera entrada y use la función de focus . Puedes hacer lo siguiente Ejemplo:
$(document).ready(function() { $('input').on( 'keydown', function( e ) { if( e.keyCode == 9 ) { const allEmptyInput = $('input').filter(function() { return $(this).val() === ""; }); // Return if there is no Empty Input if (allEmptyInput.length === 0) return; e.preventDefault(); const currentInput = $(e.target); const nextAllEmptyInput = currentInput.nextAll('input').filter(function() { return $(this).val() === ""; }); // Focus on first input if last is focus if (nextAllEmptyInput.length === 0) { allEmptyInput.eq(0).focus(); return; } const firstEmptyInput = nextAllEmptyInput.eq(0); firstEmptyInput.focus(); } }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <label>First Input</label><br/> <input type="text"/> <br/> <label>Second Input</label><br/> <input type="text"/> <br/> <label>Third Input</label><br/> <input type="text"/>El uso de id solo le dará el primer elemento con esa id . Utilice class en su lugar.