JSFiddle - React, Tailwind, and code Playground

by Matt Ball

HTML

<div class='all'>
    <input type='text'/>
    <div class='output'></div>
</div>

CSS

.all{
    height:500px;
    background-color:lightyellow;
}

JavaScript

$('input').live('keyup', function (e) {
    if(!e.ctrlKey && !e.altKey && !e.metaKey) {
        if(e.keyCode==37 || e.keyCode==39 || e.keyCode==13) {
            e.stopPropagation();
        }
    }
    return true;
});

$(document).delegate(':not(input)', 'keyup', function (e)
{
    if (e.which === 39){
       $('.output').prepend("<p>Right arrow is pressed</p>");
    } else if (e.which === 37){
        $('.output').prepend("<p>Left arrow is pressed</p>");
    }
});