在R中使用enter键和动作按钮

Question

我正在尝试编写一个javascript函数来扩展R闪亮的动作按钮演示。我希望用户能够通过点击动作按钮和当他们选择数字输入表单时点击enter来输入一个数字。ui.R的代码是：

shinyUI(pageWithSidebar(
  headerPanel("actionButton test"),
  sidebarPanel(
    tags$head(tags$script(src = "enter_button.js")), 
    numericInput("number", "N:", min = 0, max = 100, value = 50),
    br(),
    actionButton("goButton", "Go!"),
    p("Click the button to update the value displayed in the main panel.")
  ),
  mainPanel(
    verbatimTextOutput("nText")
  )
))

和服务者：

shinyServer(function(input, output) {
 ntext <- eventReactive(input$goButton, {
    input$number
  })

  output$nText <- renderText({
    paste(ntext(), input$goButton)
  })
})

我在www/文件夹中的一个名为enter_button.js的文件中包含了以下javascript：

$("#number").keyup(function(event){
    if(event.keyCode == 13){
        $("#goButton").click();
    }
});

但是，当我运行应用程序时，选择number input并点击enter操作按钮不会增加，但是如果我单击它，它就会增加。或者，我还测试了只在文档中的任何地方按enter就可以：

$(document).keyup(function(event){
    if(event.keyCode == 13){
        $("#goButton").click();
    }
});

这起作用了，所以我怀疑jQuery找不到#number元素。提前感谢！

Answer 1

我能够使用jQuery is(":focus")函数解决这个问题，我使用的代码是：

$(document).keyup(function(event) {
    if ($("#number").is(":focus") && (event.key == "Enter")) {
        $("#goButton").click();
    }
});

Answer 2

这个github页面的代码就像一个魅力：https://github.com/daattali/advanced-shiny/blob/master/proxy-click/app.R

来源：https://deanattali.com/blog/advanced-shiny-tips/#proxy-click

library(shiny)

jscode <- '
$(function() {
  var $els = $("[data-proxy-click]");
  $.each(
    $els,
    function(idx, el) {
      var $el = $(el);
      var $proxy = $("#" + $el.data("proxyClick"));
      $el.keydown(function (e) {
        if (e.keyCode == 13) {
          $proxy.click();
        }
      });
    }
  );
});
'

ui <- fluidPage(
  tags$head(tags$script(HTML(jscode))),
  actionButton("btn", "Click me to print the value in the text field"),
  div("Or press Enter when the text field is focused to \"press\" the button"),
  tagAppendAttributes(
    textInput("text", NULL, "foo"),
    `data-proxy-click` = "btn"
  )
)

server <- function(input, output, session) {
  observeEvent(input$btn, {
    cat(input$text, "\n")
  })
}

shinyApp(ui, server)

Answer 3

添加下面的代码在闪亮的应用程序。

外部Ui和Server功能-

jscode <- '
$(function() {
  var $els = $("[data-proxy-click]");
  $.each(
    $els,
    function(idx, el) {
      var $el = $(el);
      var $proxy = $("#" + $el.data("proxyClick"));
      $el.keydown(function (e) {
        if (e.keyCode == 13) {
          $proxy.click();
        }
      });
    }
  );
});
'

内部Ui功能-

tags$head(tags$script(HTML(jscode))),
`data-proxy-click` = "goButton"

goButton -动作按钮的名称

这将工作100%享受。