Display keystrokes pressed


I’m having a problem making my project display keystrokes pressed. Can’t be a textfield as the feature I’m trying to present must be ‘global’ and triggered wherever on the page. Basically comes down to this:

No matter what you’re doing, you start typing on your keyboard, these keystrokes appear on the screen. Any idea where to start?


Here’s one way. Pretty straightforward. There is likely a more elegant way to do this, though. …Almost certainly with javascript injection. This method could get less reliable depending on how complex your page is, and certainly won’t stand up to “No matter what you’re doing.” But, hopefully it is good enough for prototype purposes and is completely native Axure.

keystroke capture.rp (48.1 KB)

There is a text field widget that gets focus in the Page Loaded event. For good measure, same happens in the Page Click or Tap event. The text field, named “charCapture” appends its text value to a box, named “log” and clears itself, all in the Key Up event. In this way every character entered on the keyboard is reflected in the text value of the “log” widget, one key press at a time. The text field cannot be hidden (most browsers consider this a security risk) or placed outside the viewport of a dynamic panel (as it will be shown when it gets focus.) So, the widget is visible but simply placed behind another widget (the “log” box) so it is not apparent to the user.

The trick will be to maintain focus on “charCapture” if you have focusable widgets. Also, any non-printing or “non-alphanumeric” keys won’t be included, but you could have some special conditions to deal with these. For example, I included cases for the Backspace key (deletes last char in the “log” text) and Delete key (deletes all text in “log”.) You could use special/extended chars or fonts to show or deal with things like arrows, Return, PageUp, PageDown, Home, Ctrl, Alt, and so forth. This could possibly be extended to show key combinations like Ctl+Alt+1.

One thing that will break this is the Tab key, as that will shift focus away from the “charCapture” widget and in most browsers shift focus away from the webpage altogether.

1 Like

This was a big help to me, thanks!

I found a way to get Tab to work as well: Add a dummy Text Field (I called it GoBack), and place it immediately ABOVE the CharCapture widget in the Outline. Add a “Got Focus” interaction to GoBack, and set the Actions to “Wait 10 ms” then “Focus CharCapture” (I found that without the Wait it didn’t work). Since the user is unlikely to pres Tab for less than 10 ms, they will still be holding down Tab when CharCapture gets focus again, so when they release it, CharCapture can grab the Tab Key Up event.

1 Like

I’ve needed to do something similar just now, to get the Delete key operational in a UI.

What I did was to put a button on the screen which re-set focus on itself when it got a Lost Focus message. It just used a Key Down event to examine all keys, and used the logic of one Case statement based on “If Delete” or “If Backspace” to perform the required action. Focus was set to the button during its own On Load event

To get around the invisibility issue, just set to control (in this case a button) to be very small, hidden behind another control or located unobtrusively in the corner of the screen, and have an opacity level of zero. Since it’s On Click event is not used, it is harmless wherever it is.