Simple KeyboardEvent.key polyfill

README.md

Recently, I've been working on a Smart TV application targeted at both LG and Samsung models. I had problems keeping the main code platform independent because the key codes on events generated by the remote controls differed between the vendors. While LG's remote control keys generated fairly sane codes, Samsung's didn't, with the codes for numeric keys seeming completely random (for example, the numeric key 1 has the key code 101, but 5 has 9).

I eventually decided to polyfill KeyboardEvent.key, and allow passing a map to the polyfill so that the platform-dependent code could define their own keysets.

The property exposes itself on both the KeyEvent (non-standard) and KeyboardEvent (standard) objects and is ideal for use in specific, targeted environments.

key-polyfill.js

/**
 * Provides a default map for event.key in keyboard events
 */
(function (global) {
    "use strict";
    var defMap = {
            13: 'Enter',
            27: 'Escape',

            33: 'PageUp',
            34: 'PageDown',

            37: 'ArrowLeft',
            38: 'ArrowUp',
            39: 'ArrowRight',
            40: 'ArrowDown',
        },

        // Other printable characters
        fcc = [ 32 ],

        keyManager = global.keyManager = Object.create(Object, {
            map: {
                get: function () { return map; },
                set: function (o) { map = o; }
            }
        }),

        prop = { get: function () {
                    var code = this.which;

                    return map[code] || 'Unidentified';
               }},

        map = Object.create(defMap);

    // Numpad
    for (var i = 0; i <= 9; i++)
        defMap[i + 96] = String(i);

    // F keys
    for (var i = 1; i < 25; i++)
        defMap[i + 111] = 'F' + i;

    // Printable characters
    for (var i = 48; i < 91; i++)
        defMap[i] = String.fromCharCode(i);

    if (global.KeyboardEvent)
        Object.defineProperty(global.KeyboardEvent.prototype, 'key', prop);

    if (global.KeyEvent)
        Object.defineProperty(global.KeyEvent.prototype, 'key', prop);

})(this);

lg.js

// Sample key-map generator for Samsung Smart TV
(function () {
    var keyMap      = Object.create(keyManager.map),
        lgKeys      = {
            'UP'        : 'ArrowUp',
            'DOWN'      : 'ArrowDown',
            'LEFT'      : 'ArrowLeft',
            'RIGHT'     : 'ArrowRight',

            'BACK'      : 'BrowserBack',

            'PAGE_DOWN' : 'ChannelDown',
            'PAGE_UP'   : 'ChannelUp',

            'RED'       : 'ColorF0Red',
            'GREEN'     : 'ColorF1Green',
            'YELLOW'    : 'ColorF2Yellow',
            'BLUE'      : 'ColorF3Blue',
            'TOOLS'     : 'ContextMenu',

            'ENTER'     : 'Enter',
            'GUIDE'     : 'Guide',
            'INFO'      : 'Info',

            'PLAY'      : 'MediaPlay',
            'PAUSE'     : 'MediaPause',
            'STOP'      : 'MediaStop',
            'REWIND'    : 'MediaRewind',
            'FAST_FWD'  : 'MediaForward',
        };

    Object.keys(lgKeys).forEach(function (p) {
        keyMap[eventObj['VK_'+p]] = lgKeys[p];
    });

    keyManager.map = keyMap;
})();

samsung.js

// Sample key-map generator for Samsung Smart TV
(function () {
    var keys    = new window.Common.API.TVKeyValue(),

        vals = {
            'UP'        : 'ArrowUp',
            'DOWN'      : 'ArrowDown',
            'LEFT'      : 'ArrowLeft',
            'RIGHT'     : 'ArrowRight',

            'RETURN'    : 'BrowserBack',

            'CH_DOWN'   : 'ChannelDown',
            'CH_UP'     : 'ChannelUp',

            'RED'       : 'ColorF0Red',
            'GREEN'     : 'ColorF1Green',
            'YELLOW'    : 'ColorF2Yellow',
            'BLUE'      : 'ColorF3Blue',
            'TOOLS'     : 'ContextMenu',

            'ENTER'     : 'Enter',
            'GUIDE'     : 'Guide',
            'INFO'      : 'Info',

            'PLAY'      : 'MediaPlay',
            'PAUSE'     : 'MediaPause',
            'STOP'      : 'MediaStop',
            'RW'        : 'MediaRewind',
            'FF'        : 'MediaForward',

            'VOL_DOWN'  : 'VolumeDown',
            'MUTE'      : 'VolumeMute',
            'VOL_UP'    : 'VolumeUp'
        },

        map     = Object.create(keyManager.map);

    for (var i = 0; i <= 9; i++)
        map[keys['KEY_'+i]] = String(i);

    Object.keys(vals).forEach(function (p) {
        map[keys['KEY_'+p]] = vals[p];
    });

    keyManager.map = map;
})();

This is absolutely amazing, and I plan on using this technique later.

I'll share it here.