Keyboard Event with jQuery

Our Document Structure

In our document I have some basic HTML page created like such 

It has some styles as well

In the script.js file I have written some jQuery so when the "click me" button is clicked, the text changes to "I have been clicked"

In this lesson, we are going to learn three keyboard events

• Keypress
• Keyup
• Keydown

I'm going to query the DOM and write some jQuery by writing keypress and also put e which is the event call back. For demonstration purposes I'll console.log('I have been pressed', e);

$(document).ready(function($){

  $('button').on('click', function() {
    $(this).text('I have been clicked');
   })

  $('body').on('keypress', function (e) {
    console.log('I have been pressed', e);
})

});

Save it refresh the page and our page looks like this
 

So in our code we can recognize what kind of key was pressed and then take some action after that key was pressed. There are three kinds of keyboard events. When you press down, it's a key down. When you press up, it's a key up. Just between the key up and key down event, the key pressed event triggers. 

$(document).ready(function($){

  $('button').on('click', function() {
    $(this).text('I have been clicked');
   })

  $('body').on('keypress', function (e) {
    if(e.keyCode === 74 && e.ctrlKey === true
      $('button').click();
    console.log('I have been keydown', e);
})

});

Save it, refresh the screen and you see when I hit Ctrl + J the button got clicked

We can also modify a little bit as well like for example if you don't want it to work only when Ctrl + J is clicked but also when command + J is clicked or maybe C is clicked. So I'm going to write jQuery as shown below, as well as in the screenshot

$(document).ready(function($){

  $('button').on('click', function() {
    $(this).text('I have been clicked');
   })

  $('body').on('keypress', function (e) {
    if(e.ctrlKey === true){
     if(e.keyCode === 74 || e.keyCode === 67){ 
     $('button').click();  
      
 console.log('I have been keydown', e);
})

});

Save it, refresh the screen and now if I click Ctrl + C or Ctrl + J you will see the triggered happened.

I hope you enjoyed this lesson, if you have any question, leave your comments below. I'll talk to you in the next lesson. Good bye :)