如何在Shiny页面加载时自动聚焦到textInput组件

你当前的代码无法实现加载时聚焦到spot输入框，核心问题是JS选择器错误、逻辑冗余，以下是修正方案：

问题分析 #

1. JS代码里的选择器$("#select ~ .input-control > .input")完全错误，你的目标输入框id是spot，Shiny生成的textInput输入框id就是spot，直接用$("#spot")就能定位到目标组件。
2. 无需通过shiny:connected发送自定义消息再触发聚焦，可直接在页面加载完成的事件中执行聚焦操作，简化逻辑。
3. 代码里监听input$select属于无效逻辑，你的UI中并没有id为select的组件。

修正后的完整代码 #

library(shiny)

js <- '
// 等待Shiny完成初始渲染后执行聚焦
$(document).on("shiny:idle", function(){
  // 定位到id为spot的输入框并设置焦点
  $("#spot").focus();
});
'

ui <- fluidPage(
  tags$head(tags$script(HTML(js))),
  headerPanel("Focus",  windowTitle = "Focus"),
  fluidRow(
    column(width = 2, class = "panel",
           textInput("spot", "spot"),
           actionButton("click", "Click")
    ),
    column(width = 10,
           textOutput("text")
    )
  )
)

server = function(input, output, session) {
  // 点击按钮时重新聚焦到spot输入框
  observeEvent(input$click, {
    $("#spot").focus()
    print("Clicked")
  })

  output$text <- renderText({
    ""
  })
}

shinyApp(ui = ui, server = server)

关键修改说明 #

• 使用shiny:idle事件：该事件会在Shiny完成所有初始渲染后触发，确保目标组件已经存在于DOM中，避免因组件未加载导致的聚焦失败。
• 简化JS逻辑：直接调用$("#spot").focus()实现聚焦，无需自定义消息处理器，代码更简洁直观。
• 移除无效代码：删掉了无用的input$loaded监听和input$select监听，减少冗余。

如果需要保留通过自定义消息触发聚焦的逻辑，也可以使用以下JS代码：

js <- '
$(document).on("shiny:connected", function(){
  Shiny.addCustomMessageHandler("focus", function(x){
    $("#spot").focus();
  });
  // 初始加载时自动触发聚焦
  $("#spot").focus();
});
'

对应的server部分保留observeEvent(input$click)并使用session$sendCustomMessage("focus", list(NULL))即可。

内容的提问来源于stack exchange，提问作者xm1