Keyboard shortcuts in app

What is the best way to implement keyboard shortcuts in Phoenix? This is for an app I am working on at lookupnote.io – registration code “student” if you want to give it a try. Feedback wanted!

2 Likes

Uh, keyboard shortcuts for the phoenix server? That seems odd to need, do you have a keyboard hooked up to the server?

Or do you mean keyboard shortcuts on the browser, in which case that is a javascript thing, not a phoenix thing. :slight_smile:
However, if you listen for the top-level key events in the DOM then you can listen for what you need to handle them there without overriding keys for, say, inputs. :slight_smile:

2 Likes

Yes, in the browser. Thanks!

3 Likes

Do you have a recommended Javascript or JQuery library for this? I want a key combination
like control-N to execute something that can already be done by clicking a link or button.

Standard javascript way: scripting - How can I add a keyboard shortcut to an existing JavaScript Function? - Stack Overflow

Just register a response function for the keyup event on the DOM. :slight_smile:

Also, Ctrl+N might not be overridable in most browsers, it is often the new window button.

3 Likes

That worked really well — thanks!

2 Likes

Your welcome. :slight_smile:

I use basically that same code to do some hotkey presses myself. :slight_smile:

1 Like

I am really pleased with this solution. Before, in Rails and Angular apps, I used libraries that I didn’t
understand. It is really just a few lines of JS — no mysteries.

1 Like

jQuery and things like that were useful back in the days of IE6 and such, but javascript itself is easy enough and those abstractions are not needed anymore unless you need to worry about IE9< or so, and even then you can test for features and either do or not do things depending, so it is dead simple. I do not see the point in tons of abstractions that end up being a lot more hassle. Vanilla JS is easy, still a poorly made language, but easy. :slight_smile:

3 Likes