是否有包含 "reset" 按钮的闪亮 textInput 小部件？

Question

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

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

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

Answer 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)

是否有包含 "reset" 按钮的闪亮 textInput 小部件？

Is there a shiny textInput widget with a "reset" button incorporated?

r

widget

reset

textinput

shiny