JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<form action="">
    <input type="text" name="test-0"> <br>
    <input type="text" name="test-1"> <br>
    <input type="text" name="test-2"> <br>
    <select name="select-1">
        <option value="1">1</option>
        <option value="2">2</option>
    </select>        <br>
    <input type="text" name="test-3" class="focused"> <br>
    <select name="select-2">
        <option value="1">1</option>
        <option value="2">2</option>
    </select>       <br>
    <input type="radio" name="test-4">    <br>
    <input type="radio" name="test-5">    <br>
    <input type="checkbox" name="test-6">    <br>
    <a href="#">test</a>   <br>
    <button>go</button>
</form>


<div id="currentFocusElement"></div>

CSS

body{margin:20px;}

JavaScript

//logging focus
$(document).ready(function(){
    console.log(document.activeElement,'first focused element');    
    $('.focused').focus();
    console.log(document.activeElement,'set focused element');
});

$(document).on('focusin', function(e) {
    if (e.keyCode == 9) {
        console.log(e.target,'keyup tab focus');
    } else {
        console.log(e.target,'focusin mouseclick focus');
    }
});