JSFiddle - React, Tailwind, and code Playground

by Kendall Starr

HTML

<div class="note" style="font-family:arial; font-size:13px; margin:10px;">
    Maintains desirable functionality if one of the keys is held continuously.<br>
    ex: Hold Shift, then tap Delete multiple times.<br><br>Also try:<br>ALT+CTRL+SHIFT + ENTER <br>or:<br>CTRL+SHIFT+ALT + ENTER
    </div>
<div class="alert" style="width:300px; height:200px; border:1px solid red; margin:10px;"></div>

JavaScript

var map = [];
var down = [];
$(document).on('keydown','body', function(e) {
    if(!map[e.which]){
        down.push(e.which);
        if(down[0] === 68 && down[1] === 69 && down[2] === 86) {
            $('.alert').html('D + E + V was pressed');
        } else if(down[0] === 17 && down[1] === 13) {
            $('.alert').html('CTRL + ENTER');
        } else if(down[0] === 16 && down[1] === 46) {
            $('.alert').html('SHIFT + DEL');
        } else if(down.length>2) { 
            // only care that last key is last...
            if($.inArray(68,down)!=-1 && $.inArray(69,down)!=-1 && down[2] === 86) {
                $('.alert').html('A hacky D+E+V was pressed');
            }
            if($.inArray(18,down)!=-1 && $.inArray(17,down)!=-1 && $.inArray(16,down)!=-1 && down[down.length-1] === 13) {
                $('.alert').html('(ALT<=>CTRL<=>SHIFT) + ENTER');           // alternative -->----^-----^-----^
            }
        }
        /* more conditions here */
    }
    map[e.which] = true;
}).keyup(function(e) {
    map[e.which] = false;

    /* important for detecting repeat presses of last key while holding first key(s) */
    unset(down,e.which);
    
    $('.alert').html('');
});

/* removes an element from an array by its value 
   found at http://stackoverflow.com/questions/3954438/remove-item-from-array-by-value */
function unset(arr) {
    var what, a = arguments, L = a.length, ax;
    while (L > 1 && arr.length) {
        what = a[--L];
        while ((ax= arr.indexOf(what)) !== -1) {
            arr.splice(ax, 1);
        }
    }
    return arr;
}