Simple onscreen keyboard for web apps
JavaScript HTML CSS
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

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.


  • 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