1.1.1 • Public • Published

    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




    npm i @helios-interactive/okey

    DownloadsWeekly Downloads






    Last publish


    • caitlinboldt
    • adammcfadden
    • chickenfoot
    • mneil
    • halfwizard