JSFiddle - React, Tailwind, and code Playground

by Exceeder

HTML

<form id="typerForm">
<input id="typer" style="position:relative; left:-100em;"/>
</form>

<div id="myInput" style="border:2px solid #4AA; width:6em; height:1em; font-size:2em"></div>

<button id="startInput">Start input</button>
<div style="height:20em; background-color:#eee">
    
</div>

JavaScript

$('#startInput').click(function() {
    $('#typer').focus();
});

$('body').click(function() {
    $('#typer').focus();
});


$('#typerForm').submit(function() {
    //alert("submit");
    setTimeout("$('#typer').focus();", 1000);
    return false;
});

$('#typer').bind('keyup', function(e) {
    var input = $.trim($(this).val());
    // some lines of code..
    $('#myInput').text(input);
    //...
    //$(this).val('').focus(); // clean up
});