JSFiddle - React, Tailwind, and code Playground

by f0t0n

HTML

<form id="code16chars">
    <input name="cod1" size="4" maxlength="16" id="cod1" type="text" >
    <input name="cod2" size="4" maxlength="4" id="cod2" type="text" >
    <input name="cod3" size="4" maxlength="4" id="cod3" type="text" >
    <input name="cod4" size="4" maxlength="4" id="cod4" type="text" >
</form>

JavaScript

(function() {
    // Initializing a regular expression object globally
    // to avoid of creating new object each time 
    // when splitToGroups function will be called:
    var re = /(.{4})/g;
    
    // It could be also something more specific.
    // For example:
    //
    // var re = /([0-9a-f]{4})/ig;
    
    function splitToGroups(str) {
        return str.match(re);
    }
    
    $('#cod1').on('keyup', function(e) {
        if(!e.ctrlKey || e.which != 86) {
            return;
        }
        var groups = splitToGroups(this.value);
        if(groups !== null) {
            console.log(groups.join('-'));
            for(var i = 0; i < 4; i++) {
                $('#cod' + (i+1)).val(groups[i]);
            }
        }
    });
    
    /* Try to paste this value into first textbox:
    
    123456789102abcd
    
    */
})();