https://github.com/onedeadkey/x-keyboard
A zero-dependency web component to display and emulate keyboard layouts.
https://github.com/onedeadkey/x-keyboard
keyboard-emulation keyboard-layout webcomponent
Last synced: 6 days ago
JSON representation
A zero-dependency web component to display and emulate keyboard layouts.
- Host: GitHub
- URL: https://github.com/onedeadkey/x-keyboard
- Owner: OneDeadKey
- License: mit
- Created: 2019-04-03T11:58:00.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-09-27T07:09:51.000Z (8 months ago)
- Last Synced: 2025-05-11T17:37:29.205Z (7 days ago)
- Topics: keyboard-emulation, keyboard-layout, webcomponent
- Language: JavaScript
- Homepage: https://OneDeadKey.github.io/x-keyboard
- Size: 5.28 MB
- Stars: 42
- Watchers: 4
- Forks: 14
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
<x-keyboard>
================================================================================
A zero-dependency web component to display and emulate keyboard layouts.
[Online demo here.](https://fabi1cazenave.github.io/x-keyboard/)
Keyboard Layouts
--------------------------------------------------------------------------------
This component uses [Kalamine][1] layouts in a JSON format describing:
- the base and AltGr/Option layers, i.e. the characters that each key outputs;
- the list of all dead keys used by the layout;
- the default keyboard geometry.
[1]: https://github.com/fabi1cazenave/kalamine/
All keyboard layouts used in the demo page are defined in the `layouts.yaml` directory,then converted to JSON by Kalamine (see `layouts`).
Layout Emulation
--------------------------------------------------------------------------------
Once the keyboard layout is loaded, emulating it should be straight-forward (see `demo.js`). This relies on the [KeyboardEvent][2]’s [code][3] property, which excludes IE & Edge at the moment.
[2]: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent
[3]: https://www.w3.org/TR/uievents-code/#code-value-tables
Supported Browsers
--------------------------------------------------------------------------------
Works with Firefox and Chrome and probably all browsers with native web component support.