Question

我正在尝试创建一个允许用户搜索自定义术语的应用程序，我要创建的逻辑是用户，输入字符串，然后按键盘上的ENTER键，执行搜索词，这是可以实现的。但是，在下面的示例中，按Enter键后，它将在文本输入中执行所有更改

我尝试将最后一个键重置为空，等等，但是没有运气找出这个小问题，下面是简化的代码

library(shiny)


ui <- fluidPage(

   # Application title
   titlePanel("example"),

   fluidRow( 
     column( 3, offset = 1,
             tags$script(' $(document).on("keydown", function (e) {
                                                  Shiny.onInputChange("lastkeypresscode", e.keyCode);
                                                  });
                                                  '),
     textInput("searchtext", 
               label = "Text input",
               value = "")),
     column( 4, textOutput("mysearch")),
     column( 4) 
    )



server <- function(input, output) {
  observe({
    if(!is.null(input$lastkeypresscode)){
      if(input$lastkeypresscode == 13){
         output$mysearch <- renderText(input$searchtext)

      }
    }
  })
}

# Run the application 
shinyApp(ui = ui, server = server)

预期的输出是，仅应在按ENTER键后显示的文本中看到更改

Answer 1

您可以将onKeyPress事件处理程序附加到文本输入：

library(shiny)

textInput2 <- function(inputId, label, value = "", width = NULL, placeholder = NULL){
  input <- textInput(inputId, label, value, width, placeholder)
  input$children[[2]] <- 
    htmltools::tagAppendAttributes(
      input$children[[2]], 
      onKeyPress = sprintf("Shiny.setInputValue('%s_keypress', event.key)", inputId))
  input
}

ui <- fluidPage(
  textInput2("textinput", "Enter text:"),
  textOutput("textoutput")
)

server <- function(input, output){
  observeEvent(input[["textinput_keypress"]], {
    if(input[["textinput_keypress"]] == "Enter"){
      output[["textoutput"]] <- renderText({
        input[["textinput"]]
      })
    }
  })
}

shinyApp(ui, server)

有人说，不建议在观察者内部定义output。为避免这种情况，您可以执行以下操作：

server <- function(input, output){

  Text <- eventReactive(input[["textinput_keypress"]], {
    req(input[["textinput_keypress"]] == "Enter")
    input[["textinput"]]
  })

  output[["textoutput"]] <- renderText({
    Text()
  })

}

或者，请参见https://webpack.js.org/loaders/html-loader。但是，我认为目前的答案更好。

根据用户输入启用然后禁用反应式事件

1 个答案: