keyboardevent

Capturing the @ key in javascript

I regularly use Atlassians confluence and I'm a fan of the simplicity with which I can insert macros, create links or reference people with the { [ and @ keys respectively. Its a great alternative to using keyboard shortcuts or using the mouse to click on menus.

I'm interested in trying similar UI in some of my applications so decided to try out capturing the @ key to load an intellisense menu for peoples names.

First I tried plain javascript to capture the keyCode on a keyUp event but couldn't get the callback to fire as expected.

I've used libraries like mousetrap before in my apps to good effect so I tested that quickly to no avail. It wouldn't fire on the binding to the @ key either. In fact I tried a bunch of key binding libraries and online testing pages and I couldn't find one that worked.

At this point after some research I found out three relevant bits of information.

There is no standardized way to detect keyboard layouts in javascript. Most libraries target US qwerty keyboard layout.

The most reliable way to detect the key pressed is by converting and comparing it using String.fromCharCode()

The only cross-browser way to reliably get the charCode is on the keypress event.

To make this code cross-browser friendly there is more to do though. Some versions of IE dont populate the e.which property. The following function I found in this article which proved very helpful in navigating the x-browser minefield.