๐Ÿ€ ๐Ÿ€ ๐Ÿ€ ๐Ÿ€ ๐Ÿ€ ๐Ÿ€ ๐Ÿ€ ๐Ÿ€ ๐Ÿ€ ๐Ÿ€ ๐Ÿ€
๐Ÿ€ ๐Ÿ€ ๐Ÿ€ ๐Ÿ€ ๐Ÿ€ ๐Ÿ€ ๐Ÿ€ ๐Ÿ€ ๐Ÿ€ ๐Ÿ€ ๐Ÿ€
๐Ÿ€ ๐Ÿ€ ๐Ÿ€ ๐Ÿ€ ๐Ÿ€ ๐Ÿ€ ๐Ÿ€ ๐Ÿ€ ๐Ÿ€ ๐Ÿ€ ๐Ÿ€
๐Ÿ€ ๐Ÿ€ ๐Ÿ€ ๐Ÿ€ ๐Ÿ€ ๐Ÿ€ ๐Ÿ€ ๐Ÿ€ ๐Ÿ€ ๐Ÿ€ ๐Ÿ€
๐Ÿ€ ๐Ÿ€ ๐Ÿ€ ๐Ÿ€ ๐Ÿ€ ๐Ÿ€ ๐Ÿ€ ๐Ÿ€ ๐Ÿ€ ๐Ÿ€ ๐Ÿ€
๐Ÿป ๐Ÿ€ ๐Ÿ€ ๐Ÿ€ ๐Ÿ€ ๐Ÿ€ ๐Ÿ€ ๐Ÿ€ ๐Ÿ€ ๐Ÿ€ ๐Ÿ€
  • Press "Start/Stop" to toggle trapping keyboard events. (Default is off.)
  • Use the arrow keys (โฌ†๏ธŽ,โฌ‡๏ธŽ,โฌ…๏ธŽ,โžก๏ธŽ) to navigate.
  • "Reset" will put the grid back to its default, initial state.

Please note this demo does use JavaScript — I have not yet updated this yet to reflect the fact that Live View now does allow repeated keystrokes, so if you look at the code, it's a little out-of-date.

I added just enough JavaScript to have a start/stop button, and to trap all keyboard events and have them sent server-side: everything else is in Phoenix Live View.

Right now, Live View does not handle repeated key events. For something like this, however, you need to fire the same key — say, โฌ†๏ธŽ — repeatedly to keep going up.