JSFiddle - React, Tailwind, and code Playground

by Jon-Carlos Rivera

HTML

<div>
    <input type="text" id="here">
</div>
<div id="output"></div>

JavaScript

var here = document.querySelector('#here');
var body = document.querySelector('body');
var output = document.querySelector('#output');

body.addEventListener('keypress', function (e) {
    if (e.target === body) {
        if (e.keyCode === 13) {
            $(here).fadeIn(1000, function(){
                here.focus();
            });
        } else {
            output.innerHTML += String.fromCharCode(e.keyCode);
        }
    }
});

here.addEventListener('keypress', function (e) {
    if (e.target === here) {
        if (e.keyCode === 13) {
            $(here).fadeOut(1000, function(){
                here.blur();
            });
        }
        e.stopPropagation();
    }
});