JSFiddle - React, Tailwind, and code Playground

by Erik Wegner

HTML

<input type="text" maxlength="1" class="def-txt-input" name="chars[1]"> 
<input type="text" maxlength="1" class="def-txt-input" name="chars[2]"> 
<input type="text" maxlength="1" class="def-txt-input" name="chars[3]"> 
<input type="text" maxlength="1" class="def-txt-input" name="chars[4]"> 
<input type="text" maxlength="1" class="def-txt-input" name="chars[5]"> 
<input type="text" maxlength="1" class="def-txt-input" name="chars[6]">

JavaScript

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

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


// 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 == 6 && intRegex.test(pastedValue)) {
            pasteValues(pastedValue);
        }
        else {
            $this.val(originalValue);
        }

        $inputs.attr("maxlength", 1);
    });
    
    $inputs.attr("maxlength", 6);
});


// Parses the individual digits into the individual boxes.
function pasteValues(element) {
    var values = element.split("");

    $(values).each(function(index) {
        var $inputBox = $('.def-txt-input[name="chars[' + (index + 1) + ']"]');
        $inputBox.val(values[index])
    });
};