1.1.1 • Published 6 years ago
@helios-interactive/okey v1.1.1
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?
- Easy way to do this is via setting
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