JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text">

JavaScript

var input = $("input");

var logKeyEvent = function (e) {
    console.log(
        "event:", e.currentEvent, 
        "key:", e.key,
        "alt:", e.altKey,
        "meta:", e.metaKey,
        "ctrl:", e.ctrlKey,
        "shift:", e.shiftKey
    );
};

var singleModifier = false;
var persistentModifier = false;

var sticky = function (e) {
    if (e.keyCode === 16) {
        console.log("shift");
        if (persistentModifier) {
            console.log("was persistent");
            persistentModifier = false;
            singleModifier = false;
        } else if (singleModifier) {
            console.log("was single");
            persistentModifier = true;
            singleModifier = false;
        } else {
            console.log("add single");
            singleModifier = true;
            console.log(singleModifier);
        }
    } else if (persistentModifier || singleModifier) {
        e.preventDefault();
        var inputField = $(e.currentTarget);
        var originalVal = inputField.val();
        var newVal = originalVal + e.key.toUpperCase();
        inputField.val(newVal);
        singleModifier = false;
    }
};

var forceCap = function (e) {
    e.preventDefault();
    e.stopPropagation();
    //console.log("event obj:", e);
    console.log("keycode:", e.keyCode);
    var inputField = $(e.currentTarget);
    var originalVal = inputField.val();
    var newVal = originalVal + e.key.toUpperCase();
    inputField.val(newVal);
};

input.keydown(sticky);
//input.keydown(forceCap);
//input.keyup(forceCap);
//input.keypress(forceCap);

//input.keydown(logKeyEvent);
//input.keyup(logKeyEvent);
//input.keypress(logKeyEvent);