Is it possible to set keyboard shortcuts on a webpage?

Question

Not system or application shortcuts, but keyboard shortcuts used specifically on a certain webpage.

Gmail shortcuts for example.

Example:

Press Alt+f while on Facebook it will change the feed from 'Top Stories' to 'Most Recent' and vice versa.

And allow the user to set these shortcuts themselves? Perhaps a chrome extension?

Answer 1

The extension Shortcut Manager allows you to create custom keyboard shortcuts, but performing inner page actions requires a little knowledge in JavaScript or at least jQuery Selectors.

Offical description

Customize shortcut keys; Assign any Javascript code or browser actions to any key strokes.

You can change the browser default shortcut keys, and assign any bookmarklets or Javascript action to your hotkeys. It works as Keyconfig on Firefox.

Example actions:

• Tabs: "Left Tab", "Upper directory", "Close right tabs", "Open your favorite page",...
• Page: "Scroll up/down", "Insert your signature",...
• Special: "Screen Capture"
• Custom: Execute any Bookmarklets or Javascript code!

You can also import or export your settings so you can share it with others.

Installation

1. Visit Shortcut Manager.
2. Click Add to Chrome.
3. Click Add.

Example

I don't have a Facebook account, so let's open the Super User inbox using a keyboard shortcut.

1. Click the Shortcut Manager icon at the right of the omnibox.

2. Click See all settings / Add new shortcuts.

3. Click on the input field Shortcut key and press the desired key combination.

   This can be either a single multi-key shortcut (e.g., Ctrl + Shift + I or Alt+I) or a sequence of keys (e.g., I, N, B, O, X).

4. Choose appropriate URL patterns.

   To match all pages of the domain superuser.com and its subdomains, use:

   *://superuser.com/*
   *://*.superuser.com/*
   

5. In Action, select Execute Javascript and enter

   http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
   

   in (1).

6. Enter Open inbox in Description.

7. We can use JavaScript's .click() method to simulate mouse clicks on any item of a web page. The tricky part is accessing those items. This is where the jQuery selectors come in handy.

   Normally, to access your inbox, you'd click on the StackExchange dropdown, then inbox. We need appropriate selectors for both.

   • Right-click the StackExchange dropdown and click Inspect Element.

     You'll see the following in the developer tools:

     <div id="header">
         <div id="portalLink">
             <a class="genu" onclick="StackExchange.ready(function(){genuwine.click();});return false;">Stack Exchange</a>
             </div>
             ...
     </div>
     

     The <a> tag is highlighted; this is the element where we want to simulate the click.

     The class of the element is genu. We could simply use the selector .genu, but that wouldn't work properly if there were multiple elements of the same class. A more reliable approach would be to access it as a child node of the <div> with ID portalLink (ID's are unique), using the selector #portalLink a.genu. Then, we use the .click() method.

     Entering any of the following lines in (2) will do the job:

     // click first <a> element with class `genu'
     // inside the element with ID `portalLink'
     $('#portalLink a.genu')[0].click();
     
     // click first <a> element with class `genu'
     // inside the element with ID `header'
     $('#header a.genu')[0].click();
     
     // click first element with class `genu' of the entire page
     $('.genu')[0].click();
     
     // click first <a> element of the entire page (unreliable)
     $('a')[0].click();
     
     // directly perform the onclick event (easy, but not always available)
     StackExchange.ready(function(){genuwine.click();});
     

   • In the StackExchange dropdown, right-click inbox and click Inspect Element.

     You'll see the following in the developer tools:

     <a id="seTabInbox" class="seCurrent">Inbox</a>
     

     This element has its own ID: seTabInbox.

     Entering any of the following lines in (2) will do the job:

     // click first (only) element with ID `seTabInbox'
     $('#seTabInbox')[0].click();
     
     // click sixth <a> element of the entire page (unreliable)
     $('a')[5].click();
     

8. Click Save and reload all open Super User pages. Your shortcut is ready to use.

Answer 2

I believe what they were looking for is the "accesskey" attribute. To use, press Alt + (the letter specified by accesskey).

Some examples:

<label for="myInput" accesskey="r"/>
<a href="https://www.w3schools.com/html/" accesskey="h">HTML</a>*

Note: Test the Alt+(letter of your choosing) before specifying it in your page to make sure that it doesn't already do something (i.e. Alt+F will usually activate the Chrome's main menu, so choose your letters wisely) Also, to make it more user-friendly, its best to indicate what letter you are using as the shortcut by underlining the letter. (i.e. as in the previous example the link should look like:

<a href="#" accesskey="h" title="Press [Alt+H] to follow link"><u>H</u>TML</a>

Answer 3

EDIT: The Chrome extension has been reviewed and accepted in the Chrome Webstore! If you're interested in trying it out, click here.

Even though this question is 10 years old, I am astonished to see that no tool has been created to solve this problem, so as a young creative web developer, I created that tool, it's called My Web Shortcuts!

It's an open-source & 100% free browser extension used to create custom shortcuts for the web. I hope this helps.

At the time of writing this answer, it's being reviewed by the Chrome Webstore team and isn't available on the Webstore yet. So you would need to install it manually from the GitHub Repo. You can go to releases and download the zip file of v1.0.0, unzip it, and drag the whole folder of extracted files into the extensions manager in your browser.

Only Chromium-based browsers (Google Chrome, Brave, Opera etc.) are supported at the moment.

Please note that it's the first version and you may face a few bugs, so if you find one, please create an issue for it.