如何在Shiny中默认选择verbatimTextOutput中的文本? [英] How to select the text in verbatimTextOutput by default in Shiny?

问题描述

这是与我之前的问题相关的问题(是否可以具有固定宽度的verbatimTextOutput并在Shiny中更改文本行?/a>).我有以下闪亮的应用程序( https://yuchenw.shinyapps.io/Shiny_verbatimtext_fixed/)可以显示长文本的verbatimTextOutput.默认情况下可以选择那些文本吗?一个示例就是书签按钮的行为.如以下屏幕截图所示，当书签弹出窗口出现时，已经选择了文本.我想使用verbatimTextOutput重现相同的行为.

This is a related question to my previous question (Is it possible to have fixed width verbatimTextOutput and have texts change lines in Shiny?). I have the following shiny app (https://yuchenw.shinyapps.io/Shiny_verbatimtext_fixed/) with a verbatimTextOutput that can display long texts. Is it possible to select those texts by default? An example would be the behavior of the bookmark button. As the following screenshot shows, when the bookmark pop-up window shows up, the texts have been selected already. I would like to reproduce the same behavior using verbatimTextOutput.

代码

library(shiny)

ui <- function(request){
  fluidPage(
    tags$style(type='text/css', '#txt_out {white-space: pre-wrap;}'),
    column(
      width = 6,
      textInput(inputId = "txt", label = "Type in some texts",
                value = paste0(rep(letters, 10), collapse = "")),
      strong("Show the texts"),
      verbatimTextOutput("txt_out"),
      br(),
      bookmarkButton()
    )
  )
}
server <- function(input, output, session){
  output$txt_out <- renderText({
    input$txt
  })
}
enableBookmarking("url")
shinyApp(ui, server)

推荐答案

感谢@ismirsehregal的帮助.在这里，我分享了这个问题的解决方法.此答案在只读模式下使用textAreaInput，而不是我最初要求的verbatimTextOutput.但是，我对textAreaInput的结果和最终外观感到满意.

Thanks for @ismirsehregal's help. Here I shared a workaround of this question. This answer uses textAreaInput in read-only mode, not verbatimTextOutput as I originally asked for. However, I am satisfied with the outcome and final appearance of the textAreaInput.

我了解了如何根据此信息选择文本( https://stackoverflow.com/a/50745110/7669809).我还从这篇文章中了解了如何为textAreaInput设置只读模式(使用jquery使textarea变为只读状态).这是我的代码.

I learned how to select texts based on this post (https://stackoverflow.com/a/50745110/7669809). I also learned how to set read-only mode for the textAreaInput from this post (Make textarea readonly with jquery). Here is my code.

library(shiny)

ui <- function(request){
  fluidPage(
    column(
      width = 6,
      tags$head(
        tags$script("
      Shiny.addCustomMessageHandler('selectText', function(message) {
        $('#txt_out').select();
        $('#txt_out').prop('readonly', true);
      });
    ")
      ),
      textInput(inputId = "txt", label = "Type in some texts",
                value = paste0(rep(letters, 10), collapse = "")),
      textAreaInput("txt_out", label = "Show the texts", heigh = "300px"),
      br(),
      bookmarkButton()
    )
  )
}
server <- function(input, output, session){
  observeEvent(input$txt, {
    updateTextAreaInput(session = session, inputId = "txt_out", value = input$txt)
  })
  observeEvent(input$txt_out, {
    session$sendCustomMessage("selectText", "select")
  })
}
enableBookmarking("url")
shinyApp(ui, server)

这是应用程序运行时的外观.

Here is how it looks when the app runs.

这篇关于如何在Shiny中默认选择verbatimTextOutput中的文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！