Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/karl-horning/key-codes-keyboard-event-handler
A simple JavaScript function to handle key events and display the pressed key and its key code dynamically in the HTML.
https://github.com/karl-horning/key-codes-keyboard-event-handler
code-snippet codepen dom-manipulation event-handling javascript keyboard-events ui-interaction user-interface
Last synced: about 6 hours ago
JSON representation
A simple JavaScript function to handle key events and display the pressed key and its key code dynamically in the HTML.
- Host: GitHub
- URL: https://github.com/karl-horning/key-codes-keyboard-event-handler
- Owner: Karl-Horning
- License: mit
- Created: 2023-12-31T10:00:37.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2023-12-31T14:02:40.000Z (10 months ago)
- Last Synced: 2023-12-31T14:35:39.842Z (10 months ago)
- Topics: code-snippet, codepen, dom-manipulation, event-handling, javascript, keyboard-events, ui-interaction, user-interface
- Language: CSS
- Homepage: https://codepen.io/karlhorning/pen/MBjMrX
- Size: 22.5 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Key Codes Keyboard Event Handler
A simple JavaScript function to handle key events and display the pressed key and its key code dynamically in the HTML.
## Table of Contents
- [About](#about)
- [Features](#features)
- [Demo](#demo)
- [Usage](#usage)
- [Installation](#installation)
- [License](#license)
- [Contributing](#contributing)
- [Acknowledgments](#acknowledgments)
- [Contact](#contact)
- [Author](#author)
## About
This project provides a straightforward JavaScript function (`checkKeycode`) that listens for keyboard events and updates the content of an HTML element with the class "keycode" to display the pressed key and its corresponding key code. The code is written using modern JavaScript syntax and is well-documented for ease of use.
## Features
- Dynamic display of pressed key and key code.
- Support for modern browsers using the 'key' property and a fallback for older browsers using 'keyCode'.
- Additional handling for the space key to display "Space" instead of an empty string.
## Demo
View the demo on [CodePen](https://codepen.io/karlhorning/pen/MBjMrX).
## Usage
1. Include the JavaScript file in your HTML:
```html
```
2. Ensure that you have an HTML element with the class "keycode" in your document:
```html
```
3. Add an event listener to call the `checkKeycode` function on keyboard events:
```javascript
document.addEventListener("keydown", checkKeycode);
```
## Installation
1. Clone the repository:
```bash
git clone https://github.com/Karl-Horning/key-codes-keyboard-event-handler.git
```
2. Copy the `script.js` file into your project.
3. Include the script in your HTML file as mentioned in the usage section.
## Contributing
Contributions are welcome! Please follow these guidelines:
1. Fork the repository.
2. Create a new branch for your feature or bug fix.
3. Make your changes and ensure that the project still works.
4. Create a pull request with a clear description of your changes.
## License
This project is licensed under the [MIT License](LICENSE).
- **Font:** [Alfa Slab One](https://fonts.google.com/specimen/Alfa+Slab+One).
- **Background Animation:** Manuel Pinto's [Pure CSS Gradient Background Animation](https://codepen.io/P1N2O/pen/pyBNzX).
## Contact
For any inquiries or support related to this project, please contact Karl Horning using any of the links in the 'Author' section.
## Author
Karl Horning: [GitHub](https://github.com/Karl-Horning/) | [LinkedIn](https://www.linkedin.com/in/karl-horning/) | [CodePen](https://codepen.io/karlhorning)