Shiny:将焦点设置到modalDialog中的输入

基础概念

Shiny 是一个用于构建交互式Web应用程序的R包。modalDialog 是Shiny中的一个函数，用于创建模态对话框（modal dialog），这种对话框会阻止用户与其他界面元素交互，直到对话框被关闭。

类型

模态对话框：阻止用户与其他界面元素交互，直到对话框关闭。
非模态对话框：允许用户在对话框打开的同时与其他界面元素交互。

应用场景

表单验证：在用户提交表单前，显示一个对话框提示用户填写必要的信息。
警告和通知：当用户执行某些操作时，显示警告或通知信息。
设置焦点：在对话框打开时，自动将焦点设置到特定的输入控件。

问题：将焦点设置到modalDialog中的输入

在Shiny中，可以使用JavaScript来控制焦点。以下是一个示例代码，展示如何在modalDialog中设置焦点到输入框：

library(shiny)

ui <- fluidPage(
  actionButton("showModal", "Show Modal Dialog"),
  modalDialog(
    textInput("inputField", "Enter something:"),
    footer = tagList(
      actionButton("closeModal", "Close")
    )
  )
)

server <- function(input, output, session) {
  observeEvent(input$showModal, {
    showModal(modalDialog(
      textInput("inputField", "Enter something:"),
      footer = tagList(
        actionButton("closeModal", "Close")
      )
    ))
    # 使用JavaScript设置焦点
    session$sendCustomMessage(type = 'setFocus', message = 'inputField')
  })
  
  observeEvent(input$closeModal, {
    removeModal()
  })
}

# 注册JavaScript函数
jsCode <- "
  Shiny.addCustomMessageHandler('setFocus', function(id) {
    var element = document.getElementById(id);
    if (element) {
      element.focus();
    }
  });
"

runApp(list(ui = ui, server = server), launch.browser = TRUE)