He intentado esto, pero en keyup no funciona para saltar la siguiente entrada, pero la búsqueda de retroceso funciona.
Buscando características:
$('.col').on('input', '.press', function() { if (this.value.length >= this.maxLength) { $(this).parent().next('div.col').find('input').focus(); } }).keyup(function(e) { if (e.which === 8 && !this.value) { $(this).prev().find('input').focus(); } }); body{display: flex;} .form-control{width: 70px; margin-right: 10px;} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col"> <div class="form-group"> <input type="text" class="press form-control" name="code" maxlength="1" autocomplete="off"> </div> </div> <div class="col"> <div class="form-group"> <input type="text" class="press form-control" name="code" maxlength="1" autocomplete="off"> </div> </div> <div class="col"> <div class="form-group"> <input type="text" class="press form-control" name="code" maxlength="1" autocomplete="off"> </div> </div> <div class="col"> <div class="form-group"> <input type="text" class="press form-control" name="code" maxlength="1" autocomplete="off"> </div> </div>He agregado un atributo tabindex en el campo de texto de tipo de entrada. El atributo tabindex identifica cada índice de pestaña siguiente para ser foco. El evento keyup de Javascript ahora saltará a la siguiente entrada, la cual incrementaré al índice de enfoque actual.
También agregué un detector de eventos de pegado en el texto de tipo de entrada y obtuve la longitud de los datos y luego pegué el valor en ellos.
$(function(){ document.querySelector('input').addEventListener("paste", function(p) { var dataLength = p.clipboardData.getData('text').length; for(var i = 1; i <= dataLength; i++) { $("input[tabindex='"+ i + "']").val(p.clipboardData.getData('text')[i - 1]); if (this.value.length >= this.maxLength) { $("input[tabindex='"+ i + "']").focus(); } } }); $('input[type="text"]').on('keyup', function(e) { if (this.value.length >= this.maxLength) { if(e.keyCode !== 9 && e.keyCode !== 16) { var tabIndex = this.tabIndex + 1; $("input[tabindex='"+ this.tabIndex + "']").val(this.value); $("input[tabindex='"+ tabIndex + "']").focus(); } } else { if(e.keyCode === 8) { var tabIndex = this.tabIndex - 1; $("input[tabindex='"+ tabIndex + "']").focus(); } } }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col"> <div class="form-group"> <input type="text" class="press form-control" name="code" maxlength="1" tabindex="1" autocomplete="off"> </div> </div> <div class="col"> <div class="form-group"> <input type="text" class="press form-control" name="code" maxlength="1" tabindex="2" autocomplete="off"> </div> </div> <div class="col"> <div class="form-group"> <input type="text" class="press form-control" name="code" maxlength="1" tabindex="3" autocomplete="off"> </div> </div> <div class="col"> <div class="form-group"> <input type="text" class="press form-control" name="code" maxlength="1" tabindex="4" autocomplete="off"> </div> </div>