https://github.com/zicklepop/key-down
A web component for quick key commands
https://github.com/zicklepop/key-down
web-component
Last synced: about 1 year ago
JSON representation
A web component for quick key commands
- Host: GitHub
- URL: https://github.com/zicklepop/key-down
- Owner: ZicklePop
- License: unlicense
- Created: 2024-06-10T21:20:49.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-11T05:18:28.000Z (almost 2 years ago)
- Last Synced: 2024-10-14T02:03:00.812Z (over 1 year ago)
- Topics: web-component
- Language: HTML
- Homepage: https://zicklepop.github.io/key-down/demo.html
- Size: 21.5 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# key-down
A web component for quick key commands
## Install
```sh
npm install --save @zicklepop/key-down
```
## Resources
- [Demo](http://zicklepop.github.io/key-down/demo.html)
- [GitHub](https://github.com/zicklepop/key-down)
- [NPM](https://www.npmjs.com/package/@zicklepop/key-down)
- [JSR](https://jsr.io/@zicklepop/key-down)
## Properties
- **data-key** _string, required_: The key we are watching to be pressed
- **data-action** _enum, optional_: Defaults to 'click', but can be set to be 'focus'
- **data-scroll** _boolean, optional_: If true, the page will scroll the wrapped element in to view
- **data-altKey** _boolean, optional_: Setting this as true or false will require the alt/option key to be pressed or not, otherwise it will not matter.
- **data-ctrlKey** _boolean, optional_: Setting this as true or false will require the control key to be pressed or not, otherwise it will not matter.
- **data-metaKey** _boolean, optional_: Setting this as true or false will require the meta/Windows/command key to be pressed or not, otherwise it will not matter.
- **data-shiftKey** _boolean, optional_: Setting this as true or false will require the shift key to be pressed or not, otherwise it will not matter. If you just want to monitor for a capital letter or symbol, it is recommended to set the `data-key` value to it (ie `A` or `!`)
## Basic Usage
Just requires a clickable child element
```html
```
## With Defined Action
By default, the web component will click the child when the key is pressed, but you can pass in an action like 'focus' for input boxes.
```html
```
## With Everything
Using every manual property.
```html
```