JSFiddle - React, Tailwind, and code Playground

by wilsonjonash

HTML

<div id="main" >
        <input id="i" type="text" />
        <div id="Div2" class="icons" style="background-color:blue; right: 25px;"></div>
        <div id="Div1" class="icons" style="background-color:red;"></div>
    </div>

CSS

*
        {
            -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
            -moz-box-sizing: border-box; /* Firefox, other Gecko */
            box-sizing: border-box; /* Opera/IE 8+ */
        }

        #main
        {
            top: 50px;
            left: 200px;
            position: absolute;
            border: 1px solid #00bfff;
            width: 250px;
            height: 27px;
        }

        input
        {
            border: none;
            width: 248px;
            height: 25px;
            position: absolute;
            z-index: 200;
        }

        .icons
        {
            text-align:center;
            border:1px solid blue;
            height: 23px;
            width: 23px;
            position: absolute;
            top: 2px;
            right: 2px;
            z-index: 99999999999999999999999;
            background-position: center;
            background-repeat: no-repeat;
        }

JavaScript

var isFocused = false;

$("#main").on('click',function(e){
    if(!isFocused){
        console.log('focus gained');
    }
    isFocused = true;
    e.stopPropagation();
});

$("#i").on('focus',function(){
    if(!isFocused){
        console.log('focus gained');
    }
    isFocused = true;
});

$(document).on('click',function(){
    if(isFocused){
        isFocused = false;
        //kick-off the validation check!
        alert('running validation');
    }
});