JS OnScreen Keyboard

What do I use this for

Web apps that need a touchscreen keyboard.

How to use this

``
var inputs = document.forms["demo"].getElementsByTagName("input");
var keyboardHost = document.querySelector('.keyboard-host');
var keyboard = new window.Keyboard(inputs, keyboardHost);
`

Check out demo.html for example.

Goals

- Minimal dependency
- Works outta the box with vanilla javascript, can be integrated easily to frameworks too
- Or at least our Backbone apps
- Has the same behavior click v.s. touch
- Allows control over its show/hide, create/destroy
- Allows customization
- layout
- style / skin
- special keys with custom functionalities

Dev Roadmap

- [x] Generate Keyboard HTML & insert them to a designated element
- [x] Make it work w/ 3 buttons first
- [x] Whenever a key is clicked or touched, it would fire an event that keyboard handles
- [x] Converge all events to a single handler
- [x] Keyboard can keep track of which element it should update
- [x] When there is an element the keyboard's focusing on, pressing keys inserts value to it
- [x] Value inserting works just like actual keyboard, takes caret place and selection into consideration
- [x] Destroy function to unbind and destroy html
- [x] Layouts are defined by config json file and can be swapped
- [x] Keys may insert a different character than its label
- [ ] Common functionality keys
- [x] backspace
- [ ] tab
- [x] A system to easily attach new func keys
- [x] 'func' property in layout files used to differentiate b/c keys
- [x] public function to attach functions to run for keys w/ diff func
- [x] Keys can have same func but different additional info too, and handlers have access to that
- [ ] Bug: When input's content is longer than input box's width, it should move the cursor to show the caret
- Easy way to do this is via setting focusedEl.scrollLeft to a high number. This would however always jump to the end of input no matter where the caret's at.
- To make this intelligent we need some method of calculating caret's pixel location?

- [x] Generated keys have a structure that allows easy style changing via CSS

- [ ] Platform testing
- [ ] Click, Touch, Chrome's touch simulation, and FastClick.js driven touch event should all behave the same
- [ ] Getters to make many type checkings easier?
- [x] setLayout
- [ ] focusedEl?
- [ ] keyboardEl?
- [ ] Support more browsers than just Chrome`