keystroke-input
v1.0.4
Published
A custom input element that handles keystrokes. Created as a custom HTML element using Web Components.
Downloads
31
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:
npm install keystroke-input
Import it into your javascript file
import "keystroke-input"
...
Without NPM
Clone the Github repository into your project's directory
git clone https://github.com/alima-webdev/keystroke-input.git
Add the input tag and javascript file to your project's HTML file
<!-- Use the attribute is="input-keystroke" on the desired input tag -->
<input id="keystroke" is="input-keystroke" />
<!-- Import the js file from the dist folder -->
<script src="./dist/keystroke-input.js"></script>
Usage
Listen to the keystrokechange event to obtain the user's keystroke
document.getElementById("keystroke").addEventListener("keystrokechange", (event) => {
const keystroke = event.detail.keystroke
...
})
The keystroke object is formatted as:
{
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 file for more details.