X

LATEST #JQUERY NEWS

Add Keyboard Shortcut to Anchor Tag Using jQuery


Making a user friendly website can be quite a challenging task. There are many areas where user interactions can improve and become friendlier. One area that can almost always be improved is navigation, and one great way to do this is by adding keyboard shortcuts to anchor elements that allow the user to open hyperlinks via the keyboard instead of the mouse. Keyboard shortcuts improve productivity by enabling users to accomplishing tasks more quickly and without much effort. In this post, we’ll learn how to add keyboard shortcuts to anchor tags using jQuery.

HTML Markup

First, let’s take a look at the HTML markup. There are 3 anchor tags defined with href attribute set to external websites like Google, Facebook and Twitter respectively. There is also a unique ID that is defined for every anchor tag:

<h1>
Use Keyboard Keys G, F or T to visit respective websites.
</h1>
<br/>
<ol>
<li><a id="lnkGoogle" href="https://www.google.com">Google</a></li>
<li><a id="lnkFacebook" href="https://www.facebook.com">Facebook</a></li>
<li><a id="lnkTwitter" href="https://www.twitter.com">Twitter</a></li>
</ol>

jQuery Code

To implement this functionality, we need to capture the keys and identify them. To capture the keys, attach a keyup() event to the document itself and then check for the key code of the pressed key. If the key code matches with “G, g, F, f, T, t” then navigate to the respective website.

The following is the outline of the jQuery solution:

  • First, capture the keyup event and attach it to the document object. In the keyup event, the key is detected using the keyCode or charCode.
  • The keycode for “G” and “g” is 71 and 103, for “F” and “f” is 70 and 102 and for “T” and “t” is 84 and 116.  Since we already know the keycodes, create a switch case logic block based on these keycodes. 
  • Keyup event is called, when user presses any key on the keyboard. If the pressed key’s keycode matches any of the switch case statement, the method openWebsite() is called.  This method is responsible for opening the href URL.  It accepts the anchor tag object as parameter, so we pass the same using the ID of the anchor tag.
  • Inside the openWebsite() method, replace window.location with anchor tag href value. This will open the URL in the same tab/window. The window.location object can be used to get the current page address (URL) and to redirect the browser to a new page.

Here is the complete jQuery code:

<script type="text/javascript" language="javascript">
$(document).ready(function() {
  $(document).keyup(function(e) {
var key = (e.keyCode ? e.keyCode : e.charCode);
    switch (key) {
      case 71:
 case 103:
openWebsite($('#lnkGoogle'));
        break;
      case 70:
 case 102:
openWebsite($('#lnkFacebook'));
        break;
      case 84:
 case 116:
openWebsite($('#lnkTwitter'));
        break;
      default:
        ;
    }
  });
  function openWebsite(obj) {
window.location.href = $(obj).attr("href");
  }
});
</script>
});

The above code opens the URL in the same tab/window. If you wish to open the URLin a new tab/window, then replace the window.location to window.open:

function openWebsite(obj) {
window.open($(obj).attr("href"),'_blank');
}

Conclusion

To sum it up, the above jQuery solution provides a small and simple solution for attaching keyboard shortcuts to anchor tag elements. The user can open the anchor tag link via keyboard keys, instead of using the mouse. This is a handy and productive feature that companies like Yahoo Mail are Gmail have implemented for various tasks.

Recently Published

article image
»

How to Use Google Analytics with jQuery Mobile

jQuery Mobile is an HTML5 based web-page framework that’s ...

article image
»

jQuery Snippets: Using jQuery to Check All Boxes

When you’ve given your users a ton of checkbox input fields ...

article image
»

Useful jQuery Code Snippets for Working with Images

Images are an essential part of any website and sometimes working ...

article image
»

How to Use jQuery to Check if Cookies are Enabled

A cookie (not the kind with chocolate chips) is a small piece of data ...

article image
»

A Beginner’s Guide to jQuery’s Selectors

We talk a lot about event methods on this site, but not so much about ...

article image
»

Add Keyboard Shortcut to Anchor Tag Using jQuery

Making a user friendly website can be quite a challenging task. There ...

Screen Shot 2017-04-23 at 10.15.41 AM
»

How to Use jQuery to Create a Sticky Navigation on Scroll

Creating “sticky” elements is something that can often be ...

article image
»

How to Use jQuery’s Keystroke Methods

jQuery has a few built-in keystroke methods that are all triggered by ...

article image
»

How to Change iFrame Styling Using jQuery

If you’ve ever had the displeasure of working with iFrames, ...