Detecting keyboard focus

Update 25/06/2017: I highly recommend Jeremy Fields’ Better, faster,
stronger approach

The keyboard focus plugin makes it easy to detect keyboard focus (as opposed to mouse focus).

Strong/clear focus highlighting for links and UI elements has great accessibility benefits, but it can also detract from the appeal of a site/application or distract users who are not used to this type of UI feedback. It is keyboard and alternate input device users that benefit most from strong/clear focus highlighting. This plugin allows you to style elements focused via keyboard navigation clearly while leaving elements focused via mouse events with default highlighting (or at least less dramatic highlighting).

This plugin replicates the default behaviour of the Chrome browser (as of version 4) across all browsers. Chrome gives strong yellow/orange highlighting to links/inputs that have received focus via the keyboard.

Browser support

The plugin has been tested under the following browsers

  • Firefox (3.6)
  • Internet Explorer (6, 7, 8 )
  • Opera (10.5)
  • Safari (4)
  • Chrome (4)

The plugin currently has no visible effect in browsers that don’t support the CSS outline property (for example: Internet Explorer 6 and 7). You may however use the classes applied by this plugin to add your own focus styles for these browsers.


Place the following code in the <head> of your XHTML document.

Note: For best performance, it is recommended that you combine all the JavaScript files below into a single minified file.

<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="jquery.keyboard-focus.js"></script>

The plugin will be initialised automatically once the DOM is ready.

By default the plugin will add a class of mouse-focus to all elements that gain focus using the mouse.

The plugin will also add a class of focus to all elements that gain focus (this is useful for styling for browsers like IE6 that don’t support the :focus pseudo-selector).

Working example

A complete demonstration of the keyboard focus plugin is available.


keyboard focus is licensed under the The GNU General Public License (GPL), by downloading and/or using it you are agreeing to abide by the terms of that license.


Download the complete keyboard focus 0.3 example package (.zip)

Individual files

Posted in

3 Responses to "Detecting keyboard focus"

Leave a reply