JSFiddle - React, Tailwind, and code Playground

by drewP

HTML

<input id="first-name" placeholder="Firstname" /> 

<input id="middle-name" placeholder="Middlename" />

<input id="last-name" placeholder="Lastname" />

CSS

input {
    display: block;
    padding: 3px 5px;
    margin: 8px;
    min-width: 180px;
}

JavaScript

$(function () {
    $("input#last-name").keyup(function () {
        var text = $(this).val(),
            checkForDelimiter = /\//.test(text);
        
        if(checkForDelimiter) {
           $("input#first-name, input#middle-name").attr("disabled",true);               
        }
        else {
            $("input#first-name, input#middle-name").removeAttr("disabled");               
        }
    });

    $("input#last-name").blur(function () {
        var text,
            textArr = [],
            textArr2 = [];
        
        textArr = this.value.split('/');

        for (var i = 0, limit = textArr.length; i < limit; i++) {
            text = $.trim(textArr[i]);
            if (text) {
                
                var split = text.split(' ');
                
                for (var x = 0, len = split.length; x < len; x++) {
                    split[x] = split[x].charAt(0).toUpperCase() + split[x].slice(1).toLowerCase();
                }
                
                textArr2.push(split.join(' '));
            }
        }

        this.value = textArr2.join(' / ');
    });        
    
    
});