declarative style keyboard input

// jsfiddle link: https://jsfiddle.net/B1KMusic/ofwa3pq2/embedded/result,js,html,css
// Stackoverflow link: https://stackoverflow.com/a/12444641/1175714

// The Keyboard Object:

const Keyboard = Object.freeze({
    final: Object.freeze({
        bind_proto: Object.freeze({
            key: null,
            ctrlKey: false,
            altKey: false,
            desc: null,
            callback: null,
        })
    }),

    private: Object.seal({
        el: null,
        bindings: null,
        ev_keydown_ptr: null
    }),

    public: Object.seal({
        /* (nothing here yet) */
    }),

    _mkbind: function(bind){
        let self = this;

        return Object.seal({...self.final.bind_proto, ...bind});
    },

    _binding_filter: function(search){
        return bind => (
            bind.altKey  === search.altKey &&
            bind.ctrlKey === search.ctrlKey &&
            bind.key     === search.key
        );
    },

    _binding_lookup: function(bind){
        let self = this;
        let result = self.private.bindings.find(self._binding_filter(bind));

        if(typeof result === "undefined")
            return null;

        return result;
    },

    _ev_keydown: function(){
        let self = this;

        return function(ev){
            let result = self._binding_lookup(ev);

            if(result === null)
                return;

            ev.preventDefault();
            result.callback(ev);
        }
    },

    _get_label: function(binding){
        let ret = binding.key;

        if("ABCDEFGHIJKLMNOPQRSTUVWXYZ".indexOf(binding.key) !== -1)
            ret = "shift-" + ret;

        if(binding.ctrlKey)
            ret = "ctrl-" + ret;

        if(binding.altKey)
            ret = "alt-" + ret;

        return ret;
    },

    _pad_left: function(text, width){
        while(text.length < width)
            text = " " + text;

        return text;
    },

    attach: function(el){
        let self = this;

        self.private.ev_keydown_ptr = self._ev_keydown();
        self.private.el = el;
        self.private.el.tabIndex = 0;
        self.private.el.addEventListener("keydown", self.private.ev_keydown_ptr);
        self.private.bindings = [];
    },

    detach: function(){
        let self = this;

        if(self.private.el === null)
            return;

        self.private.el.removeEventListener("keydown", self.private.ev_keydown_ptr);
    },

    add_binding: function(bind){
        let self = this;
        let bind_proper = self._mkbind(bind);
        let result = self._binding_lookup(bind_proper);

        if(result !== null)
            return false;

        self.private.bindings.push(bind_proper);
        return true;
    },

    remove_binding: function(bind){
        let self = this;
        let bind_proper = self._mkbind(bind);
        let result = self._binding_lookup(bind_proper);
        let index = self.private.bindings.indexOf(result);

        if(result === null || index === -1)
            return false;

        self.private.bindings.splice(index, 1);
        return true;
    },

    list_bindings: function(){
        let self = this;
        let out = "";
        let labels = self.private.bindings.map(self._get_label);
        let longest = labels.map(l => l.length).reduce((a,b) => a>b?a:b, 0);

        labels.map(label => self._pad_left(label, longest)).forEach(function(label, i){
            out += `${label}  ${self.private.bindings[i].desc}\n`;
        });

        return out;
    }
});

// Our custom client code: (assumes two HTML elements: one with class=input and one with class=output)

let inputbox = document.querySelector(".input");
let outputbox = document.querySelector(".output");

function log(msg){
    outputbox.innerHTML = msg;
}

Keyboard.attach(inputbox);

// Here's where the magic is...

Keyboard.add_binding({
    key: "d",
    desc: "Notify 'd'",
    callback: function(ev){
        log("You pressed d");
    }
});
Keyboard.add_binding({
    key: "D",
    desc: "Notify 'D'",
    callback: function(ev){
        log("You pressed D (shift-d)");
    }
});
Keyboard.add_binding({
    key: "d",
    ctrlKey: true,
    desc: "Notify '^d'",
    callback: function(ev){
        log("You pressed ^d (ctrl-d)");
    }
});
Keyboard.add_binding({
    key: "D",
    ctrlKey: true,
    desc: "Notify '^D'",
    callback: function(ev){
        log("You pressed ^D (ctrl-shift-d)");
    }
});
Keyboard.add_binding({
    key: "?",
    desc: "Print this help.",
    callback: function(ev){
        log(Keyboard.list_bindings().replace(/\n/g, "<br>"));
    }
});

// At this point, you can click the .input element, hit '?' on your keyboard, and watch the magic unfold.

// The difference between this and the Input "helper class" as seen on the SO answer, is that the helper class makes quite a few assumptions and pretty much prevents the browser from doing anything so long as you're focused on the attached element. On top of this, the pressed keys are kept track of in an event handler that you have no control over, which means that it only works in a game loop.

// This version is heavily functional in design and embraces the event loop cooked into JS. There is one single event handler which is generated upon attachment, which, instead of shotgun-preventDefault()'ing everything, performs a strict lookup based on what you pressed, matching one and only one binding (if you bind multiple callbacks to the same key signature, only the first-registered one will be executed; the others will be ignored), then executes its callback and prevents default. Also, since the input handling is now data-based, a list of keybindings can be dynamically generated. Further, since the default is only prevented when a callback is found, that means you can focus on an input-taking element, press Ctrl+D (assuming it's bound), and have the browser NOT open the bookmark dialogue while doing whatever Ctrl+D was set to do, and at the same time, you can press Ctrl+L (assuming it's NOT bound), and have the browser focus the Address bar, since that's its default action.

// That's not to say that this approach is inherently better (even though it is). If you need to check for input in a game loop independent of event handlers, and you need to be able to press multiple keys at once (including combinations like f+j), then you should probably use something like the helper class, because otherwise, with this approach, you might end up doing something silly, like writing callbacks that set global flags that are used in the gameloop. If you are developing a responsive website/webapp and want to easily and dynamically bind input, then you should use something like this. Note that you could "combine" both approaches and implement multi-key with dynamic binding. It's not that complicated.

// Also note that this shouldn't be attached to multiple elements at one time, because it's designed for only one. This is a tech demo, not a library. That's why I say "use something like". `Keyboard`, in this case, is a giant state machine. Essentially a singleton class. It ALSO wouldn't be too terribly complicated to make a "prototype object" to generate "keyboards", or to just define everything in a function the way it's done in the "helper class", such that multiple unique instances can be used at once.