Поля ввода с автоматическим продвижением (серийный номер, состоящий из нескольких частей)

Я нашел плагин ... но все же хотел бы узнать, как это сделать проще всего.

http://www.jqueryscript.net/form/jQuery-Plugin-For-Auto-Tab-Form-Fields-autotab.html

Если я вас правильно понимаю, я думаю, вы могли бы использовать эту функцию:

Рабочая демонстрация: http://jsfiddle.net/kfbjy8fr/1/

function getResult() {

    var HTMLinsert = "",
        values = $(document).find('input');


    $.each( values, function( index, element) {

        HTMLinsert += element.value

        if (index !== values.length -1 ) {

            HTMLinsert += '-'
        }


    })

    return HTMLinsert;


}

var checkForTab = function() {

    if ( $(this).prop('maxlength') === $(this).val().length ) {

        $(this).closest('input').next().focus();

    }
}

Я нашел эту кодовую ручку весьма впечатляющей: Он поддерживает:

• ввод только цифр или смешанный ввод (буквы+цифры)
  (раскомментируйте код, если нужно)
• копирование серийного номера
• проверка всего серийного кода на наличие ошибок ввода
  (например, не заполняется только последнее поле)

У него нет кода геттера - вот возможная реализация меня:

<button onclick="evalResults(event)"> evalResults </button>

<script>
function evalResults(e) {
    e.preventDefault();

let serial = '';
for(let i = 0; ++i <= valueLen / inputLen;) {
    let serial_fragment = document.querySelector('.def-txt-input[name="chars[' + i + ']"]');
    serial_fragment = serial_fragment.value.toString();
    if (serial_fragment.length != inputLen) {
      // invalid input - too few letters/digits
      serial = undefined;
      break;
    }
    serial += serial_fragment;
}

// serial: string if valid input
//         undefined if invalid input
if (serial !== undefined) // valid input
    alert('The serial is: ' + serial);
else // serial === undefined
    alert('Invalid serial code');


}
</script>

Код с codepen.io:

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <p>Paste the following in the first input or type</p>
      <p>9847FG28RT038L71EE7U</p>
    </div>
    <div class="col-xs-12">
      <form class="form">
          <div class="form-group">
            <div class="col-xs-12">
              <label>Serial Number: </label>
            </div>
            
            <div class="col-xs-2"><input type="text" maxlength="4" class="def-txt-input form-control" name="chars[1]"> </div>
            <div class="col-xs-2"><input type="text" maxlength="4" class="def-txt-input form-control" name="chars[2]"> </div>
            <div class="col-xs-2"><input type="text" maxlength="4" class="def-txt-input form-control" name="chars[3]"> </div>
            <div class="col-xs-2"><input type="text" maxlength="4" class="def-txt-input form-control" name="chars[4]"> </div>
            <div class="col-xs-2"><input type="text" maxlength="4" class="def-txt-input form-control" name="chars[5]"> </div>
        </div>
    </div>
  </div>
</div>

var $inputs = $(".def-txt-input");
var intRegex = /^\d+$/;
var valueLen = 20;
var inputLen = 4;

// Autotab replaces all the old code below
// https://github.com/Mathachew/jquery-autotab
$inputs.autotab({ format: 'alphanumeric', uppercase: true });


// Prevents user from manually entering non-digits.
/*
$inputs.on("input.fromManual", function(){
    if(!intRegex.test($(this).val())){
        $(this).val("");
    }
});
*/



// Prevents pasting non-digits and if value is 6 characters long will parse each character into an individual box.
/*
$inputs.on("paste", function() {
    var $this = $(this);
    var originalValue = $this.val();
    
    $this.val("");

    $this.one("input.fromPaste", function(){
        $currentInputBox = $(this);
        
        var pastedValue = $currentInputBox.val();
        
        if (pastedValue.length == valueLen && intRegex.test(pastedValue)) {
            pasteValues(pastedValue);
        }
        else {
            $this.val(originalValue);
        }

        $inputs.attr("maxlength", inputLen);
    });
    
    $inputs.attr("maxlength", valueLen);
});

*/
// Parses the individual digits into the individual boxes.
function pasteValues(element) {
  // we split the original value in parts of inputLen length
    var re = new RegExp('.{1,'+inputLen+'}','g');
    var values = element.match(re);
    
    $(values).each(function(index) {
        var $inputBox = $('.def-txt-input[name="chars[' + (index + 1) + ']"]');
        $inputBox.val(values[index])
    });
};

Он имеет следующие зависимости (вы можете использовать его без таблицы стилей):

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-autotab/1.9.2/js/jquery.autotab.min.js'></script>