July 2, 2009. Complaints are raised on Meta Stack Overflow over the styling of <kbd> tags. One helpful commenter humorously suggested that

Now all they need is an onclick handler to make them look like you are pressing them. Then an alert box pops up and says "On your keyboard, idiot!".

This is what this script does.

What about links?

Putting links in <kbd>s (or <kbd>s in links) is generally a Bad Idea. However, it happens, and sometimes you want to click them. To compensate for this, any <kbd> that contains a link or is contained directly within one will not trigger an alert.


The MIT License



Or copy and paste this into a bookmarklet:

javascript:$('<style type="text/css">').text('kbd:hover{border-style:outset}kbd:active{border-style:inset}').appendTo(document.head);$(document).on('click','*:not(a)>kbd:not(:has(a))',function(){alert("On your keyboard, idiot!");});void(0)


Runs on any browser that jQuery supports (which is quite a few).


It's just me, @michaelb958. You can contact me by:

  • Commenting on or answering this post. This is the preferred mechanism for providing feedback or suggestions.
  • Pinging me on chat. For general conversation and stuff.
  • Emailing me (email address available on my GitHub profile). For use in case of emergency.


jQuery, with a dash of JavaScript.
Github Gist!

  • 7
    If you're using a browser that doesn't support jQuery... you should totally drop that and try jQuery.
    – hichris123
    Commented Feb 11, 2014 at 2:48


You must log in to answer this question.

Browse other questions tagged .