Creates a keyboard with multiple tabs that can then be assigned to different input elements. Keyboard appears when the input elements are brought to focus and the key-value is inserted at the end of the input element.

Note: Keyboard needs to be closed explicitly. It does not close when input element goes out of focus.

In case of multiple input elements it inserts into the last focused element.

It takes options as the only input which should contain the following properties:

elms is the array of objects that represent an input field.

{
    field: document.querySelector('#elm-id'),
    onKeypress: function(field){
        // do something
    }
}

keys is an array of objects each of which represents a tab.
Each tab object should contain name, lines, and an optional renderer method for specific rendering engine like katex. Example:

keys: [
    {
        name: 'ABC',
        lines: [
            ['q', 'w', 'e', 'r'],
            ['a', 's', 'd', 'f'],
            ['z', 'x', 'c', 'v']
        ],
        renderer: function(data, elm) {
            elm.textContent = data;
        }
    },
    {
        name: 'LaTex',
        lines: [
            ['\\sigma', '\\rho', '\\theta'],
            ['\\sin', '\\cos', '\\tan'],
            ['\\phi', '\\epsilon', '\\lambda']
        ],
        renderer: function(data, elm) {
            return katex.render(data, elm);
        }
    }
];

var options = {
    'keys': keys,
    'elms': elms
}
var kb = KeyBoard(options)

0. Better key-level handling - take data in an object instead of an array, support key level styling with className option
1. Store cursor positions for all inputs to pass into callback as second parameter
2. Make draggable, optionally.
3. Better home page