Virtual Keyboard plugin
A simple virtual keyboard plugin for inputs and text areas
Preview
Demo Link
Installation
npm
$ npm install virtual-keyboard-plugin --save
yarn
$ yarn add virtual-keyboard-plugin --save
unpkg CDN
You can also skip yarn/npm install by using repos on the cdn
Configuration
- Add fontawesome css file in your index.html
- Add virtual-keyboard.css which is inside the node_modules/virtual-keyboard folder
- Add the javascript file of the virtual-keyboard plugin in your index.html (before body or after as you want)
- add 'virtual-keyboard' as an attribute of your input/text-area
- Create a new HTML element that will serve as a button to open the virtual keyboard and add to it two attributes :
- 'data-target-id': 'input_id' => put the Id of the input that will be used by the virtual keyboard
- 'data-keyboard-mapping': 'azerty' or 'qwerty' => set 'azerty' as value if you want azerty layout or 'qwerty' if you want qwerty layout
### Example of use
Customs Events
event | description | event.detail |
---|---|---|
onInputValueChange_VK | event fired when the value of the input has changed | keyAscii, keyValue, newInputValue, oldInputValue |
onEnterKey_VK | event fired when the enter key is pressed on the virtual keyboard | keyAscii, keyValue, newInputValue, oldInputValue |
onBackSpaceKey_VK | event fired when the backspace key is pressed on the virtual keyboard | keyAscii, keyValue, newInputValue, oldInputValue |
details of the event are accessible inside the event.detail property short example :
document
Compatibility
IE9+ , Chrome , Firefox, Opera
TODO
- Support of characters with accents
- Add a new key for smileys before the space key
- Add posibility to choose keyboard position (default is bottom centered)