单击闪亮的动作按钮后，将光标聚焦在textArea上

Question

无论如何，我都不是html或JavaScript方面的专家。因此，希望对这个问题有帮助。

我认为我应该提供较小版本的应用程序，以便能够解释该问题。这是一个简单应用程序的app.R，允许用户在textArea中写一个词。该单词的第一个字母将自动显示为操作按钮的标签，如果用户单击该操作按钮，则将更新textArea的内容，说明用户编写的单词是以元音还是辅音开头。

library(shiny)
library(shinydashboard)

# Define UI for application 
ui <- dashboardPage(
    dashboardHeader(
            title = "page_title"
    ),
    dashboardSidebar(
    ),
    dashboardBody(
            tabBox(title = "app_title",
                    id = "id", width = "800px",
                    tabPanel("tab1)",
                             fluidRow(
                                     column(width = 12,
                                            box(
                                                    status = "info", solidHeader = TRUE,
                                                    collapsible = FALSE,
                                                    width = 12, 
                                                    title = "textInput", 
                                                    tags$textarea(id = "text_input1", rows =  2, cols = 50, "", autofocus = "autofocus"), 
                                                    fluidRow(
                                                            column(width = 12, 
                                                            actionButton("actionbutton1", label = textOutput("actionbutton1_label"))
                                                            )))))),
                    tabPanel("tab2"
                    ))))

# Define server logic 

server <- function(input, output, session) {
    data1 <- eventReactive(input$actionbutton1, {substr(input$text_input1, 1, 1)})
    output$actionbutton1_label <- renderPrint(cat(noquote({substr(input$text_input1, 1, 1)})))
    observe({
            if (input$actionbutton1 == 0) return()
            isolate({
                    if (data1() %in% c("a", "e", "i", "o", "u")) {
                            updateTextInput(session, "text_input1",
                                            value = paste(input$text_input1, "starts with a vowel", "", sep = " "))
                    }
                    else {
                            updateTextInput(session, "text_input1",
                                            value = paste(input$text_input1, "starts with a consonant", "", sep = " "))
                    }
            })
    })}
# Run the application 
shinyApp(ui = ui, server = server)

问题定义：首次运行上述应用程序时，由于textArea标记定义中的参数autofocus =“ autofocus”，因此您将在textArea中看到光标，因此在加载时没有问题。当您单击操作按钮时，光标不再位于textArea中。在这个简单的应用程序中，这似乎没有必要，但是在实际应用程序中，这很重要，我希望在用户单击操作按钮后将光标移回textArea中。

再次出现的问题是，每当应用程序的用户单击操作按钮时，光标就会从textArea中消失，并且该应用程序的用户必须在文本区域中单击才能使光标返回并继续他/她的输入。我希望无论用户使用应用程序界面的其他元素多少次，始终保持活动状态并将光标集中在textArea上，从而为用户节省了额外的单击时间。

研究：在线上有很多有关如何控制光标位置的帖子。我认为，在这些帖子中，如果我错了，请纠正我，这种方法几乎与我希望实现的目标最相关：

http://www.mediacollege.com/internet/javascript/form/focus.html

这是什么特别，我需要的帮助：

如果单击上面的链接，您会发现我在这里复制的一段非常有趣的html代码：

<form name="myform2">
<input type="text" name="mytextfield2">
<input type="button" name="mybutton" value="Set Focus"   OnClick="document.myform2.mytextfield2.focus();">
</form>

这是我希望您能够为我提供的帮助，如何以及如何将这些代码嵌入闪亮的ui.R中？当然，我将不得不为textArea和按钮分配一个表单，并且我将相应地更改textArea和按钮的名称。我只需要使上面的html代码ui.R友好（可读和可执行）即可。非常感谢对此的任何帮助。

到目前为止，我尝试了一下，但没有成功：

tags$head(HTML("<form name="myform2">
                         <input type="text" name="text_input1">
                         <input type="button" name="addword1" value="Set Focus" OnClick="document.myform2.text_input1.focus();">
                         </form>"))

如您所见，当我将上述代码嵌入ui.R文件时，语法混乱了，并且提出了各种语法警告。

可能很重要：我正在使用闪亮的仪表板，并且textArea和action按钮均在dashboardBody的tabBox的tabPanel中定义。

非常感谢

Answer 1

这是您问的工作版本：

library(shiny)
library(shinydashboard)

# Define UI for application 
ui <- dashboardPage(
  dashboardHeader(
    title = "page_title"
  ),
  dashboardSidebar(
  ),
  dashboardBody(tags$head(tags$script(
    'Shiny.addCustomMessageHandler("refocus",
                                  function(NULL) {
                                    document.getElementById("text_input1").focus();
                                  });'
    )),
    tabBox(title = "app_title",
           id = "id", width = "800px",
           tabPanel("tab1",
                    fluidRow(
                      column(width = 12,
                             box(
                               status = "info", solidHeader = TRUE,
                               collapsible = FALSE,
                               width = 12, 
                               title = "textInput", 
                               tags$textarea(id = "text_input1", rows =  2, cols = 50, "", autofocus = "autofocus"), 
                               fluidRow(
                                 column(width = 12, 
                                        actionButton("actionbutton1", label = textOutput("actionbutton1_label"))
                                 )))))),
           tabPanel("tab2"
           ))))

# Define server logic 

server <- function(input, output, session) {
  data1 <- eventReactive(input$actionbutton1, {

    substr(input$text_input1, 1, 1)

    })

  output$actionbutton1_label <- renderPrint(cat(noquote({substr(input$text_input1, 1, 1)})))

  observeEvent(input$actionbutton1,{

    isolate({
      if (data1() %in% c("a", "e", "i", "o", "u")) {
        updateTextInput(session, "text_input1",
                        value = paste(input$text_input1, "starts with a vowel", "", sep = " "))
      }
      else {
        updateTextInput(session, "text_input1",
                        value = paste(input$text_input1, "starts with a consonant", "", sep = " "))
      }

      session$sendCustomMessage(type="refocus",message=list(NULL))

    })

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