Friday , 17 November 2017
Home / Programming / JavaScript / Keyboard Events – Advanced JavaScript Tutorial
Keyboard Events
Keyboard Events

Keyboard Events – Advanced JavaScript Tutorial

It’s time to take a look at keyboard events. Another popular feature of JavaScript is the capability to detect which keys were pressed and how they were pressed.

Let’s first update our document to this.

Sweet! Now, let’s clear up the script and add this bit of code.

The first kind of event is the keydown event. This event fires when the user presses down on a key on their keyboard. When you’re working with keyboard events, you gain access to a couple of properties and methods.

In the example above, I introduce 2 new properties. The keyCode and charCode property. They’re essentially the same as they return a numeric value for the key pressed. This is based off the ASCII character set. Here’s a list of all of them.

http://www.asciitable.com/

I highly recommend you bookmark that page for future reference. You’ll find a bunch of values, but you should focus on the dec column. These are the numbers you’ll get for each key pressed. You should pay attention to the fact that ‘a’ and ‘A’ both have different values.

Try refreshing your page and press a key. You should get alerted 2 numbers.  The charCode property should return 0 regardless of the key. Why? Well, the charCode property only becomes available when you use the keypress event.

Update the event keydown to keypress like so.

Refresh your page and try pressing the keys again. You should get 2 values now. They should also be the same value.

What’s the difference between keydown and keypress ?

The keydown event is fired whenever ANY key on the keyboard is pressed down on. The keypress event fires when ONLY character keys are pressed. So, keys like shift, alt and control don’t trigger the keypress event.

What’s the difference between the keyCode and charCode properties?

The charCode property is only available for the keypress event. The keyCode property is available for both the keydown and keypress events. They both return the decimal value from the ASCII Character set.

Let’s update our script to this.

We create a variable called character that will hold the actual character pressed instead of a numeric value. To convert a code from code to character, then you use the fromCharCode() method in the String object. Lastly, we alert the character.

Try pressing the a key on your keyboard and then press Shift + A. Remember, these are 2 different values in JavaScript. If you try pressing characters like shift or alt alone, then you’ll just be returned some random character.

There’s one more event called the keyup event which fires when the user releases the key. However, we won’t go over this as it’s pretty much the same as the keydown event with the exception of when it’s fired.

Text Input

One event that’s specifically for text input is the textInput event. First, let’s update the body tags to this.

We have a text field with the ID inputField. Let’s update our script to this.

A new property is introduced here. To grab the character that was pressed, you can use the data property. This property contains the actual character pressed. You don’t have to worry about converting character codes to actual characters.

In the example above, we simply alert the character pressed. Try using it. You’ll also notice we apply this event to the input field and not the window. You can apply events to elements and not just the window object.

Conclusion

Keyboard events should be used carefully. The keydown, keypress, and inputText fire repeatedly each time the key is pressed. This can cause performance issues depending on your situation. For more information on keyboard events, then go here.

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent

About Jasko Koyn

Check Also

Try-Catch Statement

Try-catch Statement – Advanced JavaScript Tutorial

The try-catch statement is a unique way to handle errors. When errors occur, usually it …

Leave a Reply

Your email address will not be published. Required fields are marked *

ULTIMATE WORDPRESS DEVELOPMENT COURSE
Want to learn how to create your own custom WordPress plugins and themes? Check out my course!
Get 93% off my course. You'll also learn how to integrate WooCommerce and BuddyPress into your projects. This is a limited time offer
Yes, I would like to get 93% off your course!
No Thanks!
close-link