Hosting Solutions
mobile_logo Table of Contents

Capture Keyboard Input Tutorial HTML Application

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>

JavaScript Videos

General Programming

Flat Icons HTML Code Symbols Discovery JavaScriptHow to Program Code Syntax Highlighter Using JavaScriptFat Arrow Functions JavaScript Programming TutorialJavaScript Arguments Object Function TutorialJavaScript Storage Interface sessionStorage localStorage TutorialMulti Column Layout Grid Programming TutorialCustom Alert Box Programming TutorialCustom Confirm Box Programming TutorialCustom Prompt Box Programming TutorialChange CSS Class Style className Toggle TutorialPartial Print Document Tutorial HTML div ContentClick Outside Close Menu Box TutorialPercent Math Calculations Programming TutorialDual Image Reveal Control TutorialPage Loading Screen Document Preloader TutorialControl Panel Flyout Menu Windows AnimationsCustom Data Attributes HTML JavaScript CSS TutorialFullscreen API JavaScript Code Examples and SpecificationConsole Log Tutorial Chrome Firefox IE BrowsersToggle Function Click Drop Down Menus TutorialChange Tab Text and Window Title On The Fly TutorialDice Roll Programming Tutorial For Web Browser GamesDynamic Lorem Ipsum Placeholder Text TutorialBest HTML Event Handling addEventListener TutorialsetAttribute removeAttribute Methods TutorialDisabled User Handling Redirect WebsiteCapture Keyboard Input Tutorial HTML ApplicationCapture Keyboard Input Condition Logic TutorialChange Style Sheet Using Tutorial CSS Swap StylesheetWeb Page Overlay Tutorial Transparent CoverLights Out For Earth Day Tutorial Dark Page SwitchWindow Size Responsive CSS Layout Stylesheet Change TutorialRead Mouse Coordinates Pointer Position Tutorial