JSFiddle - React, Tailwind, and code Playground

by tabalinas

HTML

<div tabindex="0"></div>

JavaScript

myEventHandler = function(e) {
    switch (e.keyCode) {

    case 38:
        // on up arrow code
        target.val('up arrow');
        e.stopPropagation();
        break;

    case 40:
        // on down arrow code
        target.val('down arrow');
        e.stopPropagation();
        break;

    case 33:
        // on page up code
        target.val('page up');
        e.stopPropagation();
        e.preventDefault();
        break;

    case 34:
        // on page down code
        target.val('page down');
        e.stopPropagation();
        e.preventDefault();
        break;

    default:
        break;
    };
};

$('input').on('keydown', function(e) {
    myEventHandler(e);
});