R shiny 有条件地改变 numericInput 背景颜色

Question

考虑以下代码：

library(shiny)

ui <- shinyUI(
    fluidPage(
        column(12,
               numericInput("test", h5("Test value:"), value = 500, min = 0, max = 10000, step = 100, width = '200px')
        )
    )
)

server <- function(input, output) {
}

shinyApp(ui = ui, server = server)

我想根据无效的用户输入将 numericInput 小部件的背景色更改为红色。因此，如果用户输入文本或超出最小和最大范围的值，则小部件应为红色。

请注意，我不能使用 CSS 文件的解决方案，例如：

input:invalid {
    background-color: #FFCCCC !important;
}

原因是，如果用户在 numericInput 语句中输入的任何值不是 'step' 值的倍数，背景就会变成红色（详情请参阅：） .

那么我如何根据我定义的验证规则有条件地设置样式来实现我自己的手动验证？也就是说，我可以应用任何说明什么是有效的规则，例如：

if (is.numeric(输入$测试))
如果（输入$测试 >= 0）
如果（输入$测试 <= 10000）

Answer 1

您可以使用 Shinyjs 实现此目的。您可以根据需要调整颜色更改规则（我根据您的其他的 5 步顺序定义了规则）。

library(shiny)

jsCode <- '
shinyjs.backgroundCol = function(params) {
var defaultParams = {
id : null,
col : "red"
};
params = shinyjs.getParams(params, defaultParams);
var el = $("#" + params.id);
el.css("background-color", params.col);
}'

ui <- fluidPage(
  useShinyjs(),
  extendShinyjs(text = jsCode),
  sidebarPanel(
    numericInput("val", "Enter value:", value=50, min = 0, step = 5)
  )
)

server <- function(input, output, session) {
  observeEvent(input$val, {
    x <- input$val
    if (x %% 5 != 0 | x < 0 | is.na(x))  {
      js$backgroundCol("val","red")
    } else {
      js$backgroundCol("val","white")
    }
  })
}

shinyApp(ui, server)

Answer 2

如果您想避免使用 JS，但希望一个对象（或一组对象）根据某些用户输入更新它们的颜色，这是另一个答案：

#define reactive value
color <- reactiveVal(#77787B)

#Current Color----
#some user action
  observeEvent(input$some_action,{
    color <- switch (condition,
                     "case1" = "#57a595",
                     "case2" = "#f4552e",
                     "#77787B" #default color
                     
    )
  })
  output$color_style <- renderUI({
    #any valid selector can be used in place of "elementId"
    tags$style(HTML(paste0("#elementId {
      background-color: ",color,";}")))
  })

以上代码将进入您的服务器脚本，然后您只需要在 ui 脚本中定义输入对象和要修改颜色的元素。

这也可用于更新任何其他 CSS 属性

R shiny 有条件地改变 numericInput 背景颜色

R shiny conditionally change numericInput background colour

css

user-input

r

conditional-formatting

shiny