https://github.com/alima-webdev/keystroke-input
Keystroke Input Element
https://github.com/alima-webdev/keystroke-input
custom-elements form html input webcomponents
Last synced: 3 months ago
JSON representation
Keystroke Input Element
- Host: GitHub
- URL: https://github.com/alima-webdev/keystroke-input
- Owner: alima-webdev
- License: gpl-3.0
- Created: 2024-05-17T22:02:16.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-05-18T00:27:48.000Z (about 1 year ago)
- Last Synced: 2025-01-17T00:09:49.442Z (5 months ago)
- Topics: custom-elements, form, html, input, webcomponents
- Language: TypeScript
- Homepage:
- Size: 34.2 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Keystroke Input Element
A custom input element that handles keystrokes. Created as a custom HTML element using Web Components.
## Installation
### Using NPM
To install this custom input element in your project, use the npm command:
```bash
npm install keystroke-input
```
Import it into your javascript file
```javascript
import "keystroke-input"
...
```
### Without NPM
Clone the Github repository into your project's directory
```bash
git clone https://github.com/alima-webdev/keystroke-input.git
```
Add the input tag and javascript file to your project's HTML file
```html
```
## Usage
Listen to the keystrokechange event to obtain the user's keystroke
```javascript
document.getElementById("keystroke").addEventListener("keystrokechange", (event) => {
const keystroke = event.detail.keystroke
...
})
```
The keystroke object is formatted as:
```javascript
{
modifiers: {
alt: boolean,
ctrl: boolean,
meta: boolean,
shift: boolean
},
key: string
}
// It also contains the functions toString(), toJSON(), and validateAgainst(event: KeyboardEvent)
```
## License
This project is released under the GNU GENERAL PUBLIC license. See the [LICENSE](./LICENSE) file for more details.