JSFiddle - React, Tailwind, and code Playground

by Paul Leech

HTML

<div class="editor">
    <input type="text" />
    <input type="text" />
</div>
<div class="editor">
    <input type="text" />
    <input type="text" />
</div>
<button>GO</button>

CSS

div.editor {
    margin:5px;
    padding: 5px;
    border: 1px solid black;
}
div.loading {
    background: red;
}
div.focused {
    background: green;
}

JavaScript

$('div.editor input').focusout(function () {
    var $editor = $(this).closest('.editor');
    // wait for the new element to be focused
    setTimeout(function () {
        var $newFocus = $(document.activeElement)
        // See if the new focused element is in the editor
        if ($.contains($editor[0], document.activeElement)) {
            $editor.addClass("focused").removeClass("loading");
            confirm('Reload page?','Ok');
        }
        else
        {
            $editor.removeClass("focused").addClass("loading");
        }
    }, 1);
});