JSFiddle - React, Tailwind, and code Playground

by crislivinitup

HTML

<input id="input1" name="input1" value="input1" />
<input id="input2" name="input2" value="input2" />
<input type="button" onclick="$('#textBox').text(null)" value="reset">
    <div style="position: relative; float: right; width: 150px; "><b>Notice the cursor doesn't return to the input box. <br />Showing the focus has not been returned.</b></div>
<div id="textBox"></div>

JavaScript

$("#input1").on("focusin", function(event) {
     $("#textBox").append('<br />' + 'input1 <b>focusin</b> event');
});

$("#input1").on("blur", function(event) {
    event.preventDefault();
    $("#textBox").append('<br />' + 'input1 <b>blur</b> event');
    this.focus();
    return false;
});

$("#input2").on("focusin", function(event) {
    $("#textBox").append('<br />' + 'input2 <b>focusin</b> event');
});

$("#input2").on("focusout", function(event) {
    event.preventDefault();
    $("#textBox").append('<br />' + 'input2 <b>focusout</b> event');
    this.focus();
    return false;
});