是否有一个带有“重置”按钮的闪亮 textInput 小部件？

Posted 2023-04-18

【中文标题】是否有一个带有“重置”按钮的闪亮 textInput 小部件？

【英文标题】：Is there a shiny textInput widget with a "reset" button incorporated?

【发布时间】：2020-06-16 20:07:42

【问题描述】：

我开发了一个在线闪亮应用程序，其中包含一个 textInput() 小部件，用于输入位置名称，并据此将用户重定向到地图上的该位置（通过 geocode 包利用 Google API 的功能）。

我想将我当前的textInput() 小部件更改为另一个包含“X”按钮的小部件，以自动删除用户插入的文本。请查看此image 以查看它的示例（“X”按钮标记为红色）。

您知道是否可以在闪亮的应用程序中进行操作？非常感谢。

【参考方案1】：

试试这个：

library(shiny)

clearableTextInput <- function(inputId, label, value = "")
  el <- tags$div(
    tags$label(label, `for` = inputId),
    tags$span(
      class = "text-input-clearable",
      tags$input(id = inputId, type = "text", value = value),
      tags$span(title = "Clear", html("&times;"))
    )
  )
  js <- sprintf('
  var textInput = document.getElementById("%s");
  var clearBtn = textInput.nextElementSibling;
  textInput.onkeyup = function() 
    clearBtn.style.visibility = (this.value.length) ? "visible" : "hidden";
  ;
  clearBtn.onclick = function() 
    this.style.visibility = "hidden";
    textInput.value = "";
    Shiny.setInputValue("%s", "");
  ;
  ', inputId, inputId)
  tagList(el, singleton(tags$script(HTML(js))))


CSS <- "
.text-input-clearable 
  border:1px solid;
  padding:1px 6px 1px 1px;
  display:inline-block;

.text-input-clearable input 
  border:none;
  background:none;
  outline:none;
  padding:0 0;
  margin:0 0;
  font:inherit;

.text-input-clearable span 
  cursor:pointer;
  color:blue;
  font-weight:bold;
  visibility:hidden;

"

ui <- fluidPage(
  tags$head(
    tags$style(HTML(CSS))
  ),
  br(),
  clearableTextInput("txt", "Label"),
  br(),
  verbatimTextOutput("txt")
)

server <- function(input, output, session)

  output[["txt"]] <- renderPrint(
    input[["txt"]]
  )



shinyApp(ui, server)

【讨论】：

非常漂亮优雅的解决方案 Stéphane。一如既往的感谢。