create keyboard shortcut javascript

Easiest Way to Create Keyboard Shortcuts in JavaScript

To provide a better user experience on your website, you can create custom keyboard shortcuts in JavaScript. It not only gives convenience but also saves time when someone uses your website or web application.

Detect the keyboard by listening to the keydown event in JavaScript. The key property from the event object gives access to the key a user pressed. Check if the ctrl , shift or alt keys were pressed or not. Finally, prevent the browser's default action and perform custom actions using if condition.

Let's see all the steps to create keyboard shortcuts in JavaScript in detail with examples.

Create Keyboard Shortcuts in JavaScript

Please enable JavaScript

To create custom keyboard shortcuts in JavaScript, you have to follow a few steps. These are the following steps:

• You need to detect the keyboard in your website using addEventListener() method to the document.
• Listen keydown event to extract the keys a user pressed on the keyboard.
• You can extract the keys by accessing key property from the JS event object.
• To check whether a user is pressing ctrl , shift or alt keys, you can use ctrlKey , shiftKey or altkey properties in the JS event object.
• Finally, inside addEventListener() callback function add if condition using the keys you have extracted earlier to apply your functionality.

Note: If you want to override the default shortcuts provided by the browsers, you have to use preventDefault() method from the JS event object.

These are the steps you need to use in order to trigger custom shortcuts on your website. If it feels complicated, don't worry. Now I will discuss every step in detail.

Step 1: Detecting Keyboard in a Website

To detect keyboards on our website I will apply addEventListener() method on the document.

Here, I am listening to keydown event. There is another event called keyup . You can also use this event. But sometimes keyup event creates conflict with the default shortcuts. It is safe to use keydown event.

In the callback function, e is the event object that provides all the necessary information about the event and the keys that a user presses.

Read Also: Input VS Change VS Blur VS Focus | JavaScript Events

Step 2: Access Key and Add Keyboard Shortcuts

Now, I will extract the key user pressed on the keyboard using the event object. It provides different properties and methods related to a particular event like target , key , ctrlKey , shiftKey , altKey etc.

I am accessing the key that the user pressed using e.key . I have added toLowerCase() method to convert the letter to lowercase. Because I am checking if the letter is equal to the lowercase "s" .

It is safe to use this method in case we get uppercase "S" for a user. Then code inside the if statement will not run.

You can compare it with any key you need for your website. I am using "s" here just to give you an example.

Step3: Track if ctrl, shift or alt Key is Pressed

Sometimes you may need to check if the key is pressed with the ctrl, shift, or alt keys. You can also check it using the event object.

Now, I am checking in the condition whether the user pressed the letter "s" with the ctrl key by accessing e.ctrlKey property.

This property gives a boolean value i.e. it will be true or false . If the user press ctrl key and "s" key together, then code inside the if statement will run.

Note: You can do the same this using e.shiftKey and e.altKey properties. Both of them works exactly like e.ctrlKey property.

Step 4: Override Browser Default Keyboard Shortcuts in JavaScript

If you press the "s" with ctrl key, the browser will also try to save the document by default. Because it is the default keyboard shortcut in most web browsers.

But you might not want that to happen. To prevent the default behavior in a web browser, you just have to add one line of code.

I just added e.preventDefault() in the callback function to prevent any default keyboard shortcuts. Now, any default shortcuts provided by the web browser will not work on my website.

But if you don't want to prevent all default shortcuts, you can add e.preventDefault() inside the if statement.

Now, if you press the letter "s" with ctrl key, it will run your code and prevent the default browser shortcut. But other default shortcuts will work.

Read Also: How to Change URL Dynamically Without Reloading Page in JavaScript

How to Add Multiple Keyboard Shortcuts in JavaScript

Until now, I have added a single keyboard shortcut to my website. But what will happen if I need multiple shortcuts?

In this example, I am checking for 3 keyboard shortcuts using 3 if and else if statements. These are ctrl + s , shift + p and alt+i .

You can add your logic according to your need in between those conditional statements.

How to Add Keyboard Shortcuts in JavaScript for Specific HTML Element

There might be a situation where you don't want to add shortcuts for the global document. But you need to add them for specific input on your webpage.

For example, you have an <input> field with id "title" , you want to add shortcuts for that input only.

In this example, I am selecting the <input> field using getElementById() method and then listening to keydown event by adding addEventListener() method to it.

Now the shortcuts ctrl+s , shift+p , and alt+i will only work when our <input> field is in focus. Other rules are the same as the previous ones.

Read Also: Check Internet Connection Offline/Online Using JavaScript in Browser

Create Keyboard Shortcuts using JavaScript Library

You have seen manual ways to create custom shortcuts. But if you don't like to do this from scratch then there are many JavaScript libraries to use like Mousetrap , KeyboardJS , Keymaster , etc.

These libraries will simplify the process but for small use, I would prefer to do this using plain JavaScript. Because If you don't use most of the features of these libraries then it is unnecessary to install.

They will just increase the bundle size and page loading time. If you need many features that those libraries provide then it will be a good choice to use them.

That's it. Congratulations, you have learned to create keyboard shortcuts in JavaScript. You can easily implement this concept on your website to give additional features to visitors.

You have also seen how to override the default keyboard shortcuts provided by the browsers. That's all you need to know on this topic.

Related Posts

Check internet connection offline/online using javascript in browser, self invoking functions in javascript - why should you use, how to return multiple values from a function in javascript.

• Stack Overflow Public questions & answers
• Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers
• Talent Build your employer brand
• Advertising Reach developers & technologists worldwide
• Labs The future of collective knowledge sharing
• About the company

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

How can I add a keyboard shortcut to an existing JavaScript Function?

Here is my code:

I would like to add a keyboard shortcut to this code, how can I do this so that the function can also be executed when a button is clicked too?

Tried to add an else if statement but it doesn't work, any ideas?

• 2 actual syntax for an else-if would be else if (<condition>) { <code> }. remove the hyphen. –  lincolnk Mar 25, 2010 at 4:00

11 Answers 11

Handle the keyup event on the document .

Note that KeyboardEvent.keyCode was deprecated . Assuming the question code means to check keys by physical location, KeyboardEvent.code is the proper way to do so now.

• This works very well, thank you. How could I use this code twice because I need another shortcut key for 'playSound()'? –  Chris Mar 24, 2010 at 21:38
• add an else-if statement similar to the first if statement, but change the keycode as necessary. make your playSound() call from there. if you want to use the same key for both activities, you'll have to set up a flag variable and check/set it whenever the key is pushed to determine which action to take. –  lincolnk Mar 24, 2010 at 22:01
• And what about those browsers that don't support addEventListener ? –  James Mar 24, 2010 at 22:34
• 1 IE is the only one i've worked with that doesn't, and you would use document.attachEvent('onkeyup', doc_keyUp); there should be lots of references around to these about checking if a function exists before calling it. –  lincolnk Mar 24, 2010 at 23:02
• I tried to add an else-if but it doesn't work, please refer to the topic post to see the updated code. –  Chris Mar 25, 2010 at 0:15

If you want to trigger an event after pressing a key, try:

In this example press ALT + a :

Here is a fiddle: https://jsfiddle.net/dmtf6n27/38/

Please also note there is a difference for the keycode numbers, whether you are using onkeypress or onkeyup . W3 Schools' "KeyboardEvent keyCode" Property has more information.

• You writed "functione" instead of "function" –  Tiago Rangel May 31, 2022 at 19:11
• And you need to write the () after "function" –  Tiago Rangel May 31, 2022 at 19:11

Here's my solution:

• When you call my function, it will create an array called currentKeys ; these are the keys that will are being held down at that moment.
• Every time a key is pressed, sensed because of onkeydown , it is added to the currentKeys array.
• When the keys are released, sensed because of onkeyup , the array is reset meaning that no keys are being pressed at that moment.
• Each time it will check if the shortcut matches. If it does it will call the handler.

This worked for me

• 1 I tried using onkeyup but it was running 18 times on one press. Use onkeydown instead, it ran only once. –  cmcodes Aug 27, 2021 at 7:12

Catch the key code and then call your function. This example catches the ESC key and calls your function:

You'll need JQUERY for this example.

These appear to all be using the deprecated keyCode and which properties. Here is a non-deprecated version using jQuery to wire up the event:

Note: Ctrl + t may already be assigned to opening a new browser tab.

• .key is the non-deprecated property? –  sam boosalis May 16, 2019 at 4:28
• It does look like key is the recommended property, although it is not supported in Safari: w3schools.com/jsref/event_key_key.asp –  Blue Raspberry Mar 9, 2020 at 18:28

Here's some stuff to use if you want. You can register a bunch of keys and handler with it.

Comments are in the code, but in short it sets up a listener on the document and manages a hash with the key combinations for which you want to listen.

• When you register a key (combination) to listen for, you submit the keycode (preferrably as a constant taken from the exported "key" property, to which you can add more constants for yourself), a handler function and possibly an options hash where you say if the Ctrl and/or Alt key are involved in your plans for this key.
• When you de-register a key (combination) you just submit the key and the optional hash for Ctrl / Alt -ness.

It is not terribly tested, but seemed to work OK.

Look at Javascript Char Codes (Key Codes) to find a lot of keyCodes to use,

var activeKeys = []; //determine operating system var os = false; window.addEventListener('load', function() { var userAgent = navigator.appVersion; if (userAgent.indexOf("Win") != -1) os = "windows"; if (userAgent.indexOf("Mac") != -1) os = "osx"; if (userAgent.indexOf("X11") != -1) os = "unix"; if (userAgent.indexOf("Linux") != -1) os = "linux"; }); window.addEventListener('keydown', function(e) { if (activeKeys.indexOf(e.which) == -1) { activeKeys.push(e.which); } if (os == 'osx') { } else { //use indexOf function to check for keys being pressed IE if (activeKeys.indexOf(17) != -1 && activeKeys.indexOf(86) != -1) { console.log('you are trying to paste with control+v keys'); } /* the control and v keys (for paste) if(activeKeys.indexOf(17) != -1 && activeKeys.indexOf(86) != -1){ command and v keys are being pressed } */ } }); window.addEventListener('keyup', function(e) { var result = activeKeys.indexOf(e.which); if (result != -1) { activeKeys.splice(result, 1); } });

Explanation: I ran into this same problem and came up with my own solution. e.metaKey didn't seem to work with the keyup event in Chrome and Safari. However, I'm not sure if it was specific to my application since I had other algorithms blocking some key events and I may have mistakenly blocked the meta key.

This algorithm monitors for keys going down and then adds them to a list of keys that are currently being pressed. When released, the key is removed from the list. Check for simultaneous keys in the list by using indexOf to find key codes in the array.

Saving with ctrl+s in React

Many of these answers suggest forcibly overriding document.onkeypress . This is not a good practice because it only allows for a single event handler to be assigned. If any other handlers were previously set up by another script they will be replaced by your function. If you assign another handler later, it will replace the one you assigned here.

A much better approach is to use addEventListener to attach your keyboard shortcut. This allows you to attach as many handlers as necessary and will not interfere with any external libraries that may have attached their own.

Additionally, the UIEvent.which property was never standardized and should not be used. The same goes for KeyboardEvent.keyCode . The current standards compliant property you should use to check which key was pressed is KeyboardEvent.key . Find the key you want in the full list of available values .

For best performance, return early if your desired modifier key is not pressed. As well, rather than having multiple keypress event listeners, use a single one with a swtich/case statement to react appropriately to each key that you want to handle.

Also, do not forget to cancel the default behavior of the key with Event.preventDefault if necessary. Though, there are some shortcuts that you cannot override like ctrl+w .

Your Answer

Sign up or log in, post as a guest.

Required, but never shown

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct .

Not the answer you're looking for? Browse other questions tagged javascript scripting keyboard shortcut or ask your own question .

• The Overflow Blog
• If you want to address tech debt, quantify it first
• Fighting comment spam at Facebook scale (Ep. 602)
• Featured on Meta
• Moderation strike: Results of negotiations
• Our Design Vision for Stack Overflow and the Stack Exchange network
• Call for volunteer reviewers for an updated search experience: OverflowAI Search
• Temporary policy: Generative AI (e.g., ChatGPT) is banned
• Discussions experiment launching on NLP Collective

Hot Network Questions

• Create e virtual layer (points to line) refering to specific rows in attribute table
• Imbler v. Pachtman and Texas prosecutor Ken Anderson
• Placement of surd with unicode-math is incorrect
• How to make physical character's combat become more tactical and interesting?
• Which airline is liable for compensation in case of missed connection?
• How to achieve this shader parallax effect on any shaped object?
• Half even rounding
• Dell PowerEdge R7525 + Nvidia A16
• What are the balance implications of removing spell lists?
• Linux CLI tool for testing audio
• What do Americans say instead of “can’t be bothered”?
• Calculate the Distance to a Line Segment
• NASA and the president's power
• Is there any clear evidence that private universities tend to be better than public ones?
• RAID configuration on new server
• Was there a German embassy open in 1941 Lisbon?
• How to transfer the scaling to instances?
• How do I select an array to loop through from an array of arrays?
• What are all the possible codes for {{A\\B}}?
• Why do we have 2 /usr directories
• Why do people say 'topless' but not 'topful'?
• How to get rid of unwanted InDesign style settings in paragraph style options?
• What would happen if the Panama Isthmus was turned into an island chain?
• What are Non-GNU versions of terminal commands?

Your privacy

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy .

Create keyboard shortcuts with JavaScript, jQuery, hotkeys & mousetrap library

This post will discuss creating keyboard shortcuts with JavaScript, third-party libraries like jQuery, hotkeys, and mousetrap.

The idea is to listen to the keypress , keydown , or keyup JavaScript events and define the keyboard shortcut logic in the callback. To read the value of the key pressed by the user, you can use one or more properties defined in KeyboardEvent object like altKey , ctrlKey , shiftKey , code , key , etc.

1. Pure JavaScript

In plain JavaScript, you can use the addEventListener() method to listen for keydown event. The following example implements shortcut for Alt+x keyboard event using KeyboardEvent.altKey and KeyboardEvent.code property.

Edit in JSFiddle

  Here’s an example using the KeyboardEvent.key attribute.

2. Using jQuery

With jQuery, you can use the event.which property to watch for the keyboard key input.

3. Using hotkeys.js

There are several third-party keyboard libraries available to create keyboard shortcuts in JavaScript. One such popular library is hotkeys . You can use it like:

4. Using mousetrap.js

Mousetrap is another good JavaScript library for handling keyboard shortcuts in JavaScript. It can be used as follows:

That’s all about creating keyboard shortcuts in JavaScript and jQuery.

Rate this post

Average rating 4.47 /5. Vote count: 30

No votes so far! Be the first to rate this post.

We are sorry that this post was not useful for you!

Tell us how we can improve this post?

Sitemap / Advertise

Information

How to create keyboard shortcuts in javascript.

Advertisement:

Advertisement

In this tutorial, I will show you how to create keyboard shortcuts so as to execute associated functions when any pre-defined keyboard shortcut is triggered by the user.

KeyboardEvent Properties and Methods (*)

Using the onkeyup event, detect whether a keyboard character is pressed or not.

For run the code cross-browsers, include .which and .keyCode keyboard event methods.

As shown below, if Ctrl + Alt + the trigger key is pressed: proceed the command.

H: Home screen

A: Articles

P: Projects

Press Ctrl + Alt + H to go to the home page.

Press Ctrl + Alt + A to go to the articles page.

Press Ctrl + Alt + P to go to the projects page.

Press Ctrl + Alt + T to go to the tools page.

Press Ctrl + Alt + S to go to the sign in page.

(*) https://www.w3schools.com/jsref/obj_keyboardevent.asp

2017 - 2023 TheAmplituhedron

jQuery Script - Free jQuery Plugins and Tutorials

10 best javascript libraries to create custom keyboard shortcuts.

When you're building an accessible web app, it is critical to implement Keyboard Accessibility to ensure that your users have access to information without using a mouse.

The easiest way to implement Keyboard Accessibility on a website is to use a JavaScript keyboard shortcut library, which enables you to bind keyboard shortcuts and key presses to common actions like Navigate between pages, Like/Dislike posts, Rate products, etc.

In this blog post, you will find the 10 best (most downloaded in a year) jQuery plugins and Vanilla JavaScript libraries that make it easy to trigger any actions on the page by keyboard combinations or keypresses.

Originally Published Dec 23 2020, up date d May 18 2023

Table Of Contents:

Jquery keyboard shortcut plugins.

• Vanilla JS Keyboard Shortcut Plugins

Add Custom Keyboard Shortcuts To Webpage - keymap.js

A simple yet powerful jQuery plugin for capturing keyboard events and binding custom hotkeys and/or cheat codes to your webpage.

[ Demo ] [ Download ]

jQuery Plugin For Adding Keyboard Shortcuts To Webpage - keyboardShortcut

keyboardShortcut is a jQuery plugin used for creating custom keyboard shortcuts that give your users a quick way to control your web application without using a mouse.

jQuery Plugin For Handling Keyboard Shortcut Events

A jQuery plugin that allows the user to bind keyboard shortcut events to any element and when a key combination is pressed, an event is triggered following that keyboard shortcut.

Keyboard Shortcut Handling Plugin - jQuery ShortcutKeys

A super tiny and easy-to-use jQuery plugin for handling keyboard shortcuts on the webpage. Supports both key names and key codes.

jQuery Plugin To Enable Custom Shortcuts On Your Website - Hotkey Event

Hotkey Event is a cross-platform jQuery plugin for defining (combo) keyboard shortcuts such as 'CONTROL+ALT+PLUS' and binding an event with it.

Vanilla JS Keyboard Shortcut Libraries

Tiny & robust keyboard shortcut solution for javascript – mousetrap.

A powerful, simple JavaScript library to manage keyboard shortcuts in web applications. You can bind keys, combinations of modifier keys like Ctrl and Alt with regular keys, and even full key sequences.

Capture Keyboard Input In Pure JavaScript – hotkeys

The hotkeys JavaScript library allows to capture keyboard input and supports bind custom hotkeys with modifier keys.

Github Hotkey

Trigger an action on an element with a keyboard shortcut.

Create Custom Keyboard Shortcuts With The easyShortcut.js Library

Just another keyboard shortcut JavaScript library for creating “hotkeys” or “cheat codes” on the page.

Create Custom Keyboard Shortcuts With JavaScript – Shortcuts

A JavaScript library to handle keyboard shortcuts that let you create events triggered by custom keyboard combinations.

Conclusion:

Looking for more JavaScript libraries to bind keyboard shortcuts on the web & mobile? See jQuery Keyboard Shortcut and JavaScript Keyboard sections for more details.

• Prev: Weekly Web Design & Development News: Collective #376
• Next: Weekly Web Design & Development News: Collective #377

You Might Also Like

10 Best Progress Bar (Linear) Components In JavaScript & CSS (2023)

7 Best Pull To Refresh Plugins In JavaScript (2023 Update)

10 Best Video Lightbox Plugin In JavaScript (2023 Update)

10 Best Cascading Dropdown Plugin In jQuery And Pure JavaScript

10 Best Scrollspy Plugins In JavaScript (2023 Update)

10 Best Bar (Column) Chart Plugins In Javascript & CSS (2023 Update)

Add Your Review

Join more than 1,300 web developers who are subscribed to w3collective email newsletter. Simply drop your email address below to get actionable tips, free tools, tutorials, and more to help you grow as a developer.

No Spam. We Respect Your Privacy. Unsubscribe at any Time.

Creating keyboard shortcuts for web apps with JavaScript

In this tutorial we’ll be creating keyboard shortcuts that can be used in web apps. These are particularly handy when you want to give users the ability to save or copy data, navigate, or control playback of media all via the keyboard.

First thing we’ll need to do is create an object with the keys we want to use as shortcuts:

The shortcuts we are creating will be triggered using the control or command keys in conjunction with another alphabetical key. Control here represents the control key whilst Meta represents the command key on macOS devices.

Next we’ll setup a keydown event listener that calls a handleKeydown function:

This function sets the value of the key in the keyDown object to true . In this example we are checking if the “c” key has been pressed along with either the “Control” or “Meta” keys. As we’ve built it this way we could check for any number of key combinations pressed simultaneously.

To finish we just need to add a keyup event listener that resets the key value to false :

That’s all for this tutorial, you should now have a good understanding of how to create keyboard shortcuts to using JavaScript. If you enjoyed this tutorial we also have a number of other JavaScript tutorials for both new and experienced developers.

Related Posts

Using the HTML Geolocation API to display a users location on a map

Basic face detection with JavaScript (Tensorflow.js)

Calculate the estimated reading time of an article using JavaScript

#AD Shop Web Developer T-Shirts

Create Keyboard Shortcuts Using JavaScript

• JavaScript Howtos
• Create Keyboard Shortcuts Using …

Use Plain JavaScript to Create Keyboard Shortcuts in JavaScript

Use hotkeys.js library to create keyboard shortcuts in javascript, use jquery library to create keyboard shortcuts in javascript, use mousetrap.js library to create keyboard shortcuts in javascript.

Do you want to spice up your blog or website using keyboard shortcuts? This tutorial teaches you how to create keyboard shortcuts using JavaScript.

Please enable JavaScript

One or multiple properties, including shiftKey , altKey , ctrlKey , key , can be used by a user to get the pressed key’s value.

We can use the approaches that are listed below.

• Plain JavaScript
• Use hotkeys.js library
• Use the jQuery library
• Use mousetrap.js library

Let’s start with plain JavaScript.

JavaScript Code:

This example uses addEventListener() to listen to the event named keydown . To implement the Alt + C keyboard event shortcut, we use the KeyboardEvent.altKey and the KeyboardEvent.code .

The read-only property named KeyboardEvent.altKey is a Boolean result that tells whether the Alt is pressed or not. It returns true on pressing the key, otherwise false .

KeyboardEvent.code shows the physical key of the keyboard.

Finally, the program shows a message using alert() if the expected keypress is detected, and the preventDefault() function stops the event (it can only cancel or stop the cancelable events). We can also use the KeyboardEvent.key instead of the KeyboardEvent.code ; see the following example.

We are using the hotkeys.js library to create a keyboard shortcut for Alt + C . To use it, you must have Node.js installed on your machine or include it via the <script> tag.

We can also use it for multiple keyboard shortcuts as follows.

We use the jQuery library’s keyboard() function, which triggers the keydown event when keyboard keys are pressed. The KeyboardEvent.which has the numeric value and denotes which mouse button or keyboard key is pressed.

Remember, you may have to choose anyone from the event.which or event.keyCode depends on what is supported by your browser.

Now, we are using the mousetrap.js library to handle keyboard shortcuts. We can use it if you have Node.js or manually add it via the <script> element.

You can dig in detail here .

Mehvish Ashiq is a former Java Programmer and a Data Science enthusiast who leverages her expertise to help others to learn and grow by creating interesting, useful, and reader-friendly content in Computer Programming, Data Science, and Technology.