将 Shiny 应用程序中的焦点设置为加载时的特定 UI 元素

Question

加载我的 R Shiny 应用程序后，我想将焦点设置到 selectInput 元素，以便用户可以立即通过上下箭头选择一个项目并按 Enter。

我试图捕获 JavaScript load 事件，将其发送到 R，然后使用 Shiny.addCustomMessageHandler 设置 selectInput 元素的焦点。

作为中间步骤，我还尝试使用来自actionButton 的点击事件来触发元素焦点。虽然我认为大部分部分都应该在代码中，但load 事件不会被传输到服务器，并且焦点部分会被 JavaScript 拾取。

这篇帖子focusing the cursor in textArea after clicking an action button in shiny 也没有帮助我到达终点线。

这是我目前所拥有的：

library(shiny)
ui <- fluidPage(
  tags$head(tags$script('
    window.addEventListener("load", function(){
      alert("Loaded");
      Shiny.setInputValue("loaded", 1) // new identical function to Shiny.onInputChange
    });
 ')),
  tags$head(tags$script('
    Shiny.addCustomMessageHandler("focus", function(null) {
      document.getElementById("select").focus()
    });  
 ')),
  headerPanel("Focus",  windowTitle = "Focus"),
  fluidRow(
    column(width = 2, class = "panel",
           selectInput("select", label = "Your Choice", choices = c("Choice 1", "Choice 2"), selectize = TRUE),
           actionButton("click", "Click")
    ),
    column(width = 10,
           textOutput("text")
    )
  )
)

server = function(input, output, session) {

  observeEvent(input$loaded, {
    session$sendCustomMessage("focus",list(NULL))
    print("Loaded")
  })

  observeEvent(input$select, {
    print("Selected")
  })

  observeEvent(input$click, {
    session$sendCustomMessage("focus",list(NULL))
    print("Clicked")
  })

  output$text <- renderText({

  })
}

shinyApp(ui = ui, server = server)

感谢您的帮助。

Answer 1

打开控制台（Ctrl+Shift+i with Chrome），你会看到你的JS代码有一些错误。

主要是打开应用时shiny还没有准备好，所以找不到Shiny.setInputValue这个功能。

为确保shiny 已准备就绪，请使用：

$(document).on("shiny:connected", function(){
  ......
});

现在，经过多次试验，我发现要“聚焦”的元素并不是整个select元素。它是类selectize-input 的div 子元素，您可以使用$("#select ~ .selectize-control > .selectize-input") 进行选择。

最后，要执行的好操作不是focus，而是click。这是完整的应用程序：

library(shiny)

js <- '
$(document).on("shiny:connected", function(){
  alert("Loaded");
  Shiny.setInputValue("loaded", 1);
  Shiny.addCustomMessageHandler("focus", function(x){
    $("#select ~ .selectize-control > .selectize-input").click();
  });
});
'

ui <- fluidPage(
  tags$head(tags$script(HTML(js))),
  headerPanel("Focus",  windowTitle = "Focus"),
  fluidRow(
    column(width = 2, class = "panel",
           selectInput("select", label = "Your Choice", 
                       choices = c("Choice 1", "Choice 2"), selectize = TRUE),
           actionButton("click", "Click")
    ),
    column(width = 10,
           textOutput("text")
    )
  )
)

server = function(input, output, session) {

  observeEvent(input$loaded, {
    session$sendCustomMessage("focus", list(NULL))
    print("Loaded")
  })

  observeEvent(input$select, {
    print("Selected")
  })

  observeEvent(input$click, {
    session$sendCustomMessage("focus", list(NULL))
    print("Clicked")
  })

  output$text <- renderText({

  })
}

shinyApp(ui = ui, server = server)