如何阻止Shiny应用中回车键触发按钮点击效果？

核心问题原因 #

用户点击按钮后，按钮会保持焦点状态，此时按下回车键会默认触发该按钮的点击事件，和输入框的回车确认逻辑产生冲突。

可行解决方案 #

方案1：按钮点击后自动失去焦点 #

通过JavaScript让所有按钮在被点击后立即失去焦点，这样回车键就不会再触发它们：
在你的fluidPage()中添加以下代码：

tags$script('
  // 所有按钮点击后失去焦点
  $(document).on("click", "button", function() {
    $(this).blur();
  });

  // 输入框回车触发确认逻辑
  $(document).on("keydown", "#file_index", function(e) {
    if (e.key === "Enter" || e.keyCode === 13) {
      // 替换为你的回车确认逻辑，比如触发Shiny事件
      Shiny.setInputValue("confirm_file_index", $(this).val(), {priority: "event"});
    }
  });
')

方案2：全局阻止按钮的回车触发行为 #

直接拦截所有按钮上的回车键事件，阻止默认行为：

tags$script('
  // 阻止所有按钮被回车键触发
  $(document).on("keydown", "button", function(e) {
    if (e.key === "Enter" || e.keyCode === 13) {
      e.preventDefault();
      e.stopPropagation();
    }
  });

  // 输入框回车逻辑保持不变
  $(document).on("keydown", "#file_index", function(e) {
    if (e.key === "Enter" || e.keyCode === 13) {
      Shiny.setInputValue("confirm_file_index", $(this).val(), {priority: "event"});
    }
  });
')

为什么你之前的代码无效？ #

你之前使用$("files")选择器是错误的——Shiny中inputId="files"对应的HTML元素id是files，需要用id选择器$("#files")才能选中该按钮。但全局处理所有按钮的方式更彻底，能避免遗漏其他按钮的问题。

完整示例代码 #

library(shiny)

ui <- fluidPage(
  fileInput("files", "加载文件集"),
  textInput("file_index", "输入文件索引"),
  verbatimTextOutput("display_content"),
  
  tags$script('
    // 按钮点击后失去焦点
    $(document).on("click", "button", function() {
      $(this).blur();
    });

    // 输入框回车触发展示逻辑
    $(document).on("keydown", "#file_index", function(e) {
      if (e.key === "Enter" || e.keyCode === 13) {
        Shiny.setInputValue("trigger_display", $(this).val(), {priority: "event"});
      }
    });
  ')
)

server <- function(input, output, session) {
  uploaded_files <- reactiveVal(NULL)
  
  observeEvent(input$files, {
    uploaded_files(input$files$datapath)
  })
  
  observeEvent(input$trigger_display, {
    req(uploaded_files(), input$trigger_display)
    idx <- as.integer(input$trigger_display)
    if (idx %in% seq_along(uploaded_files())) {
      output$display_content <- renderPrint(readLines(uploaded_files()[idx]))
    } else {
      output$display_content <- renderPrint("请输入有效的文件索引")
    }
  })
}

shinyApp(ui, server)

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