@helios-interactive/okey

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.

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

Readme

Keywords

none

Package Sidebar

Install

npm i @helios-interactive/okey

Weekly Downloads

4

Version

1.1.1

License

ISC

Last publish

Collaborators

  • caitlinboldt
  • adammcfadden
  • chickenfoot
  • mneil
  • halfwizard