Right here I have a basic HTML file that I have opened in the browser, and it has an input field. You can imagine that this would be a search field in your application and I want our app to behave more like a need of the application.

One thing that we can do javascript is we can listen for certain key events and certain key down events on the window itself. This means that whenever your application is being used, then you can listen for the types of key commands that a user's typing out. What I want to do is give the ability for the user to Type 2 keys and then have it focus on the search bar right here.

We're going to leverage hotkeys and event listeners to make that possible. Let me switch over here into a visual studio code, and I'm going to create a function here. I'm going to call the function hotkeys. I'm going to say const hotkeys and I am going to make an arrow function. It will take an event and were going to pass in an "e" there which will stand for event. Then inside of this arrow function, we're going first to select a window event. I am going to say Lets window of events is just going to be a variable called Window event and then from we're going to listen in on the window and then the event.

Whenever you're working with the dom, and you're working with a client like a browser you have access in javascript to that window object. We're going to say window event use a tourney operator here and say if the event and if not then e. If that looks a little weird to you don't worry I'm going to walk through exactly what's going on there shortly. It's essentially just checking to see if the window event is what we want it to be.

If it's what's getting passed and then we want to store it in that window event variable and then I'm going to add a conditional. I will say if window event as is our variable dot keyCode. This is something that is available, and we have access to the inside of the "Window Event Object" in JavaScript, so the key code is a reserve the word. It is an element inside of that window Event Object, and I am going to say. If windowEvent is equal to 66 and what this means, 66 represents the letter B on the keyboard. In the show notes yet to give you access to a look-up table where you can see all of the different key codes that you have access to. I am going to say If this is equal to sixty-six and the window of event dot control key. This is something that we have access to where it's, and we're not going to use a key code you can type in Control key spelled out like this.

What this all represents is that we're checking to see if that window or event variable here for one if it's set. That's why we have the conditional here, and we're saying if the key code on the window event is equal to "66" and windowEvent control key which means essentially "did the user type control and the letter B at the same time?" All of this code that we've written so far. That's what it's doing it's just checking for that.

Now inside of this conditional, that's where we want to activate and focus on our search bar. Here we're going to select the search bar files and say console search bar and the set this equal to document.queryselector, and here we're wanting to grab the id of the search bar. Then below that, we want to focus up, so I'll say searchBar.focus which is a function that we have access to the inside of just regular vanilla javascript.

Then the last thing we have to do is to bind the hotkeys onto the on key down event. Now one thing I will say here is that the practice of doing this so when I'm saying document on key down and set is equal to hotkeys you do have to be cognizant of the fact here that you are now going to be overwriting your documents on key down function. This could have some other kind of unknown effect here. This event listener here, you have to be careful with it because if you have anything else in your program that has hotkeys or is listening down for that on key down event then your hotkeys function is going to override that, just be cognizant of that but it's going to work for this example we have here.

Now let's switch over into the browser and now if I type control b you can see that our search bar has been activated. So we're able to take that on key down. Then we were able to build out our own key code listener that listens for specific events. Typically it's listening for the control key and the letter B to be pressed at the same time. And then from there it simply focuses the search bar. So that is how you can add hotkeys to your application using JavaScript.

Starter Code

<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset='UTF-8'>
  <title></title>
</head>

<body>

  <input type="text" id="searchBar">

</body>

<script>
</script>

</html>

Code

<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset='UTF-8'>
  <title></title>
</head>

<body>

  <input type="text" id="searchBar" />

</body>

<script>
  const hotKeys = (e) => {
    let windowEvent = window.event ? event : e;
    if (windowEvent.keyCode == 66 && windowEvent.ctrlKey) {
      const searchBar = document.querySelector('#searchBar');
      searchBar.focus();
    }
  }
  document.onkeydown = hotKeys;
</script>

</html>

Resources

• Key Code Table