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

• Generate Keyboard HTML & insert them to a designated element

  • Make it work w/ 3 buttons first

• Whenever a key is clicked or touched, it would fire an event that keyboard handles

• Converge all events to a single handler

• Keyboard can keep track of which element it should update

• When there is an element the keyboard's focusing on, pressing keys inserts value to it

• Value inserting works just like actual keyboard, takes caret place and selection into consideration

• Destroy function to unbind and destroy html

• Layouts are defined by config json file and can be swapped

• Keys may insert a different character than its label

• Common functionality keys

  • backspace
  • tab

• A system to easily attach new func keys

  • 'func' property in layout files used to differentiate b/c keys
  • public function to attach functions to run for keys w/ diff func
  • 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?

• 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?

  • setLayout
  • focusedEl?
  • keyboardEl?

• Support more browsers than just Chrome