单击后取消对焦操作按钮（闪亮）

Question

这有点小，但在点击一个闪亮的应用程序中的动作按钮（通常是浅灰色）后，它变成一个较暗的灰色，焦点仍然在它上面。用户必须单击其他位置才能使操作按钮返回到正常的浅色。

在此处试试：Math.random()

缺少自动恢复较浅的颜色意味着用户无法获得按钮成功按下的视觉反馈。

有没有办法解决这个问题？

Answer 1

另一种方法是在进程运行时禁用该按钮，这也会阻止人们在等待结果时重新单击它。看看shinyjs包有很多不错的功能。请注意，我添加了2秒延迟来模仿长时间操作。

rm(list=ls())
library(shinyBS)
library(shiny)
library(shinyjs)

ui <- pageWithSidebar(
  headerPanel("actionButton test"),
  sidebarPanel(numericInput("n", "N:", min = 0, max = 100, value = 50),
    tags$div(style="display:inline-block",title="Push Me",bsButton("goButton", label = "Button", block = TRUE,style="primary"))
  ),
  mainPanel(useShinyjs(),verbatimTextOutput("nText")
  )
)

server <- shinyServer(function(input, output,session) {

  ntext <- eventReactive(input$goButton, {
    shinyjs::disable("goButton")
    Sys.sleep(2)
    shinyjs::enable("goButton")
    input$n
    })

  output$nText <- renderText({ntext()})

})
shinyApp(ui = ui, server = server)

已停用按钮

启用按钮

Answer 2

单击动作按钮时，您可以告诉webbrowser将动作按钮取消对焦。这样，您就无法获得所描述的效果。下面是一个（或多或少）两行JavaScript调用来实现这一目标。该脚本读起来非常简单。当文档准备就绪时，我们添加一个功能，如果单击一个按钮，则立即blurred（失去焦点）。

library(shiny)

ui <- shinyUI(pageWithSidebar(
  headerPanel("actionButton test"),
  sidebarPanel(
    tags$script(HTML("
     $(document).ready(function() {
        $('.btn').on('click', function(){$(this).blur()});
      })
    ")),
    numericInput("n", "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")
  )
))

server <- function(input, output) {

  # builds a reactive expression that only invalidates 
  # when the value of input$goButton becomes out of date 
  # (i.e., when the button is pressed)
  ntext <- eventReactive(input$goButton, {
    input$n
  })

  output$nText <- renderText({
    ntext()
  })
}

shinyApp(ui, server)