HTML5 Web Application Development By Example Beginner's guide

Time for action – adding keyboard events

The first thing we need to do is add keycodes.js to our application. This file contains a global static object named keyCodes that maps keys on the keyboard to their associated key code. For example, keyCodes.ENTER is equal to 13. Using this will make our code more readable than using key code numbers.

The next thing we need to do is open the HTML and add a new custom data attribute to the piano-key elements. We will call it data-keycode and it will be set to the value in the keyCode object we want to associate with the piano key:

<div data-note="2C" data-keycode="Q" class="piano-key white" title="C2"></div>
<!—elements not shown -->
<div data-note="4C" data-keycode="COMMA" class="piano-key white" title="C4"></div> ...