无论如何,我都不是 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 中,因为 textArea 标签定义中的参数 autofocus = "autofocus",所以焦点加载没有问题。当您单击操作按钮时,光标不再位于 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>
以下是我希望你能帮助我的,我如何以及在哪里可以将这段代码嵌入到我 Shiny 的 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 文件中时,语法乱七八糟,出现了各种语法警告。
可能很重要:我正在使用 Shiny 的仪表板,并且 textArea 和操作按钮都在仪表板主体的 tabBox 中的 tabPanel 中定义。
非常感谢
最佳答案
这是您要求的工作版本:
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)
关于javascript - 单击 Shiny 的操作按钮后,将光标聚焦在 textArea 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38362861/