JSFiddle - React, Tailwind, and code Playground

by shapeshifta

HTML

<label>Kartenbesitzer
    <input type="text" class="js-card-holder" />
</label>
<label>Kartenbesitzer Vorname
    <input type="text" class="js-card-holder-first" />
</label>
<label>Kartenbesitzer Nachname
    <input type="text" class="js-card-holder-last" />
</label>

CSS

label {
    display:block;
    margin: 10px 0;
}
input {
    display: block;
}

JavaScript

var cardHolder = $('input.js-card-holder'),
    cardHolderFirst = $('input.js-card-holder-first'),
    cardHolderLast = $('input.js-card-holder-last');


if (cardHolderFirst.length && cardHolderLast.length) {
    //split card holder name
    cardHolder.on('keyup change input focusin focusout', function () {
        var nameVal = $(this).val().trim(),
            nameSplit = nameVal.split(' '),
            lastNameLength = nameSplit[0].length + 1,
            lastName = nameVal.slice(lastNameLength);

        //paste into seperate holder fields
        cardHolderFirst.val(nameSplit[0]);
        if (lastName.length) {
            cardHolderLast.val(lastName);
        } else {
            cardHolderLast.val(nameSplit[0]);
        }
    });
}