FULL STACK   ·   UI   ·   UX   ·   GRAPHICS   ·   DEVELOPER   ·   INSTRUCTOR

Adam Khoury

Donate funds to show love and support

Click the button below to donate funds securely online. You can use your PayPal account or a credit card.

Your donations help free up my time to produce more content and assist in covering server costs. It's also a great way to say thanks for the content!

Application Configuration

Adam will be adding options here soon.

Capture Keyboard Input Tutorial HTML Application

Published :
Author :
Adam Khoury
In this JavaScript and HTML programming lesson you can learn how to build a basic web application that captures keyboard input and allows you to access the properties of keyboard events. This is especially handy for game programming and interactive applications, but the ways you can apply it are completely up to you and your imagination. In the very next video lesson we will expand upon this to show how to add condition logic in order to perform specific tasks in a web application according to specific keys being pressed by the user. <!DOCTYPE html> <script> document.onkeydown = function(event) { var key_press = String.fromCharCode(event.keyCode); var key_code = event.keyCode; document.getElementById('kp').innerHTML = key_press; document.getElementById('kc').innerHTML = key_code; var status = document.getElementById('status'); status.innerHTML = "DOWN Event Fired For : "+key_press; } document.onkeyup = function(event){ var key_press = String.fromCharCode(event.keyCode); var status = document.getElementById('status'); status.innerHTML = "UP Event Fired For : "+key_press; } </script> <h2>Javascript Capture Keyboard Input Example</h2> <h3>onkeydown - onkeyup</h3> Key Pressed : <span id="kp"></span> <br /> Key Code : <span id="kc"></span> <p id="status">Keyboard Event Status</p>