JSFiddle - React, Tailwind, and code Playground

by beej

HTML

<input id="myInput" type="text" style="display:none" />
nothing to see here
<button id="clickFocus">focus</button>
<button id="clickTrigger">triggerFocus</button>
<button id="toggler">toggler</button>

<div>
    <textarea id="sometext" rows="20"></textarea>
</div>

JavaScript

$(function () {
    $('#myInput').on('focus', function() {
       $('#sometext').text($('#sometext').text() + '\nfocus\n');
    });
    
    $('#clickFocus').on('click', function () {
        $('#myInput').focus();
    });
    
    $('#clickTrigger').on('click', function () {
        $('#myInput').triggerHandler('focus'); 
    });
    
    $('#toggler').on('click', function () {
        $('#myInput').toggle(); 
    });
});