1- ## KeyCode
1+ ### KeyCode
22
3- KeyCode is a simple web utility that shows real-time keyboard event data. Press any key and the page will display the < b > event.key</ b >, event.code, event.which, and event.keyCode values from the JavaScript keydown event.
3+ KeyCode is a simple web utility that shows real-time keyboard event data. Press any key and the page will display the ** event.key** , ** event.code** , ** event.which** , and ** event.keyCode** values from the JavaScript ** keydown event** .
44
55This tool is useful for developers, learners, and anyone curious about how browser keyboard events work.
66
77## Live Demo
88
9- [ https://nyxth-666.github.io/KeyCode/ ] ( https://nyxth-666.github.io/KeyCode/ )
9+ link: [ https://nyxth-666.github.io/KeyCode/ ] ( https://nyxth-666.github.io/KeyCode/ )
1010
1111## How It Works
1212
@@ -16,35 +16,20 @@ The site listens for the keydown event in JavaScript.
1616
1717It then displays:
1818
19- event.key — The value of the key pressed (e.g., "a", "Enter").
20-
21- event.code — The physical key on the keyboard (e.g., "KeyA", "Enter").
22-
23- event.which — Legacy numeric code for the key (deprecated).
24-
25- event.keyCode — Legacy numeric code (deprecated).
19+ - ** event.key** — The value of the key pressed (e.g., "a", "Enter").
20+ - ** event.code** — The physical key on the keyboard (e.g., "KeyA", "Enter").
21+ - ** event.which** — Legacy numeric code for the key (deprecated).
22+ - ** vent.keyCode** — Legacy numeric code (deprecated).
2623
2724This live visualization helps you understand differences between the standard and legacy keyboard properties.
2825
29- 🛠 Features
30-
31- 📟 Detects and displays keyboard event properties in real time.
32-
33- 🧪 Useful for debugging keybindings, game controls, web apps, etc.
34-
35- 💡 Minimal and clean interface.
26+ ## Features
3627
37- 📁 Project Structure
38- KeyCode/
39- ├─ index.html ← Main page showing key event output
40- ├─ script.js ← JS logic for keyboard events (if separated)
41- ├─ styles.css ← Optional styling
42- └─ README.md ← You are here!
28+ - Detects and displays keyboard event properties in real time.
29+ - Useful for debugging keybindings, game controls, web apps, etc.
30+ - Minimal and clean interface.
4331
44-
45- Note: In the simplest version, everything may be in index.html.
46-
47- 🧩 Example Output
32+ ## Example Output
4833
4934After pressing a key, the page updates like:
5035
@@ -53,37 +38,17 @@ event.code: "KeyA"
5338event.which: 65
5439event.keyCode: 65
5540
56- 💻 Usage
57-
58- Open the page in your browser.
59-
60- Click anywhere or ensure the page is focused.
61-
62- Press any key.
63-
64- Watch the displayed values update.
65-
66- ℹ️ Why This Is Useful
67-
68- 🎮 Helps game developers map controls.
69-
70- 🔧 Useful for debugging key event issues in apps.
71-
72- 🧑💻 Great for learning about JavaScript keyboard events.
73-
74- 📊 Visualizes key event properties live in the browser.
75-
76- 🧪 Browser Compatibility
77-
78- This tool relies on standard DOM keyboard events supported by all modern browsers.
79-
80- Note: event.which and event.keyCode are legacy and may not be recommended for new projects; use event.key and event.code instead where possible.
81- nyxth-666.github.io
82-
83- 📜 License
41+ ## Usage
8442
85- You can add your preferred license here (e.g., MIT, Apache 2.0).
43+ - Open the page in your browser.
44+ - Click anywhere or ensure the page is focused.
45+ - Press any key.
46+ - Watch the displayed values update.
8647
87- 📬 Feedback
48+ ## Why This Is Useful
8849
89- For suggestions or issues, open a GitHub issue or contact the project maintainer.
50+ - Helps game developers map controls.
51+ - Useful for debugging key event issues in apps.
52+ - Great for learning about JavaScript keyboard events.
53+ - Visualizes key event properties live in the browser.
54+ - Browser Compatibility
0 commit comments