Keyboard shortcuts to trigger reactive flows in R Shiny?

Question

Is it possible to have, say, F7 or Q trigger a reactive flow in a Shiny app (in Windows)? This question provides code for alternating tabs with keyboard input, but I am interested in starting reactive flows. For example, a button is 'triggered' every time the user presses Q in the keyboard.

Answer 1

I'd usually add this in an external js file and source that in with tags$head(tags$script(src = "custom.js")). Use keydown or keyup, depending on when you want the function to be triggered. Add e.preventDefault(); to stop the default being triggered, like saving the webpage.

/* js for ctrl(PC) or cmd(mac) plus S */
$(document).keydown(function(e) {
  if ((e.ctrlKey || e.metaKey) && e.which == KEYCODE.s) {
    $('#my_button').click();
    e.preventDefault();
  }
});

I have a keycode.js file that I source in first that lists the keycodes so I don't have to keep looking them up.

var KEYCODE = {
    'backspace' : 8,
    'tab' : 9,
    'enter' : 13,
    'shift' : 16,
    'ctrl' : 17,
    'cmd' : 224,
    'alt' : 18,
    'pause_break' : 19,
    'caps_lock' : 20,
    'esc' : 27,
    'space' : 32,
    'page_up' : 33,
    'page_down' : 34,
    'end' : 35,
    'home' : 36,
    'left_arrow' : 37,
    'up_arrow' : 38,
    'right_arrow' : 39,
    'down_arrow' : 40,
    'insert' : 45,
    'delete' : 46,
    '0' : 48,
    '1' : 49,
    '2' : 50,
    '3' : 51,
    '4' : 52,
    '5' : 53,
    '6' : 54,
    '7' : 55,
    '8' : 56,
    '9' : 57,
    'equal' : 61,
    'plus' : 61,
    'minus' : 173,
    'underscore' : 173,
    'a' : 65,
    'b' : 66,
    'c' : 67,
    'd' : 68,
    'e' : 69,
    'f' : 70,
    'g' : 71,
    'h' : 72,
    'i' : 73,
    'j' : 74,
    'k' : 75,
    'l' : 76,
    'm' : 77,
    'n' : 78,
    'o' : 79,
    'p' : 80,
    'q' : 81,
    'r' : 82,
    's' : 83,
    't' : 84,
    'u' : 85,
    'v' : 86,
    'w' : 87,
    'x' : 88,
    'y' : 89,
    'z' : 90,
    'left_window' : 91,
    'right_window' : 92,
    'select_key' : 93,
    '0n' : 96,
    '1n' : 97,
    '2n' : 98,
    '3n' : 99,
    '4n' : 100,
    '5n' : 101,
    '6n' : 102,
    '7n' : 103,
    '8n' : 104,
    '9n' : 105,
    'multiply' : 106,
    'add' : 107,
    'subtract' : 109,
    'decimal_point' : 110,
    'divide' : 111,
    'f1' : 112,
    'f2' : 113,
    'f3' : 114,
    'f4' : 115,
    'f5' : 116,
    'f6' : 117,
    'f7' : 118,
    'f8' : 119,
    'f9' : 120,
    'f10' : 121,
    'f11' : 122,
    'f12' : 123,
    'num_lock' : 144,
    'scroll_lock' : 145,
    'semicolon' : 186,
    'equal_sign' : 187,
    'comma' : 188,
    'dash' : 189,
    'period' : 190,
    'forward_slash' : 191,
    'grave_accent' : 192,
    'open_bracket' : 219,
    'backslash' : 220,
    'closebracket' : 221,
    'single_quote' : 222
};

Answer 2

Here's an example based on this answer:

library(shiny)

runApp(shinyApp(
  ui = fluidPage(
    tags$script(HTML("$(function(){ 
      $(document).keyup(function(e) {
      if (e.which == 81) {
        $('#button').click()
      }
      });
      })")),
    actionButton("button", "An action button"),
    textOutput("text")),
  server=function(input, output, session) {
    output$text <- renderText({input$button})
  }
))

You can use this page to find the keycode you want to use in the javascript code. In this example, if q is pressed, the element with the id button is clicked.