单击闪亮的操作按钮后，将光标聚焦在 textArea 中 [英] focusing the cursor in textArea after clicking an action button in shiny
问题描述
无论如何，我都不是 html 或 JavaScript 方面的专家.所以，我希望你能帮助解决这个问题.
I am not an expert in html or JavaScript by any means. So, I hope for you assistance with this issue.
我想我应该提供一个较小版本的应用程序，以便能够解释问题.这是一个简单应用程序的 app.R，它允许用户在 textArea 中写字，比如说一个字.单词的第一个字母将自动作为动作按钮的标签出现，如果用户点击动作按钮，则 textArea 的内容将被更新，说明用户写的单词是以元音还是以辅音开头.
I thought I should provide a smaller version of my app in order to be able to explain the problem. Here is the app.R of a simple app that allows the user to write, let's say a word, in the textArea. The first letter of the word will appear automatically as the label of the action button, if the user clicks on the action button, the contents of the textArea will be updated stating whether the word the user wrote starts with a vowel or with a consonant.
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 中看到光标，因为 textArea 标签定义中的参数 autofocus = "autofocus"，因此加载焦点没有问题.当您单击操作按钮时，光标不再位于 textArea 中.对于这个简单的应用程序，这似乎没有必要，但在实际应用程序的情况下，这很重要，我希望在用户单击操作按钮后将光标移回 textArea.
The problem definition: When you run the above app for the first time, you will see the cursor in the textArea because the argument autofocus = "autofocus" in the textArea tag definition, so no problem with the focus on loading. When you click on the action button, the cursor is no longer in the textArea. This may seem unnecessary in the case of this simple app, but in the case of the actual app, it's important and I'd hope to have the cursor back in the textArea after the user clicks the action button.
再次出现的问题是，每当应用程序的用户点击操作按钮时，光标就会从 textArea 中消失，并且应用程序的用户必须在文本区域中单击才能将光标移回并继续他/她的操作输入.无论用户使用应用程序界面的其他元素多少次，我都希望通过保持光标始终处于活动状态并聚焦在 textArea 中来为用户节省这次额外的点击.
The issue again is that whenever the user of the app clicks on the action button, the cursor disappears from the textArea and the user of the app has to click in the text area to get the cursor back and continue with his/her input. I hope to save the user this extra click by keeping the cursor always alive and focused in the textArea no matter how many times the user uses other elements of the app interface.
研究:网上有很多关于如何控制光标位置的帖子.在这些帖子中，我认为，如果我错了，请纠正我，这种方法几乎与我希望实现的目标最相关:
Research: there are many posts online relating to how to control the position of the cursor. Among these posts, I think, and please correct me if I'm wrong, that this approach is pretty much the most relevant one to what I hope to accomplish:
http://www.mediacollege.com/internet/javascript/form/焦点.html
我需要帮助的具体内容是什么:
如果你点击上面的链接，你会发现一段非常有趣的 html 代码，我复制到这里:
If you click on the above link, you will find a very interesting piece of html code that I copy here:
<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 友好(可读和可执行).非常感谢您对此的任何帮助.
Here is what I hope you're able to help me with, how and where can I embed this code in my shiny ui.R? Of course, I will have to assign a form for both the textArea and the button and I will change the names of the textArea and the button accordingly. I just need to pretty much make the above html code ui.R friendly (readable and executable). Any help with this is very much appreciated.
到目前为止我尝试过但没有奏效的方法:
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 文件中时，语法混乱并且出现了各种语法警告.
As you can see, the syntax is messed up and all sorts of syntax warnings were raised up when I embedded the above code in the ui.R file.
可能很重要:我正在使用闪亮的仪表板，并且文本区域和操作按钮都在仪表板主体的 tabBox 中的 tabPanel 中定义.
Possibly important: I am using shiny dashboard and both the textArea ad the action button are defined in a tabPanel in a tabBox in the dashboardBody.
非常感谢
推荐答案
这是您问的工作版本:
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)
这篇关于单击闪亮的操作按钮后，将光标聚焦在 textArea 中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
