在 Shiny 中单击操作按钮后,将光标聚焦在文本区域中
focusing the cursor in textArea after clicking an action button in shiny
无论如何,我都不是html或JavaScript的专家。所以,我希望你能在这个问题上有所帮助。
我想我应该提供一个较小版本的应用程序,以便能够解释问题。这是应用程序。一个简单的应用程序的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 = 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 文件。
可能很重要:我正在使用闪亮的仪表板,并且文本区域广告和操作按钮都是在仪表板正文的选项卡框中的选项卡面板中定义的。
多谢
这是您问的一个工作版本:
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)
所以在UI方面,你需要这样的东西:
tags$script('
Shiny.addCustomMessageHandler("myCallbackHandler",
function(null) {
document.myform2.text_input1.focus();
});
')
然后在与actionButton
相关的observeEvent
中调用此函数:
session$sendCustomMessage("myCallbackHandler",list(NULL))
因此,在服务器中的任何时候,当您调用该自定义处理程序时,它都会专注于输入。您可能需要更改函数中的 javascript 才能使您的页面正常工作,因为我不知道您的 HTML 中对象的名称。
希望这有帮助。
- 将事件聚焦/模糊在可编辑内容的元素上
- jQuery自动完成阻止选择后聚焦
- 自定义函数中的光标位置
- 使用向下箭头键(与tab键一样)聚焦下一个输入
- 当没有文本输入聚焦时检测空格键按下
- 在Widget代码中使用javascript从左向右滑动光标图像
- 将文本插入光标所在的文本区域
- jQuery聚焦文本框并转到末尾,但也可以设置光标的位置,以便用户可以看到它
- JQuery - 将光标放在文本区域的末尾,当光标聚焦时
- 是否可以将光标锁定/聚焦到文本区域的最后一行
- 在文本字段中插入文本后聚焦光标
- 在他通过 jQuery 通过 focusout 离开后,我如何用光标重新聚焦到输入
- 将光标聚焦在 HTML 上创建,然后在 Lightswitch 2013 中的属性字段之间移动光标
- 只有当光标聚焦在文本框中时才使用Javascript
- 将光标聚焦到隐藏字段
- 当光标聚焦在一个字段时,Phonegap返回按钮不工作
- 替代选择/聚焦功能,自动将光标放置在质量的文本框中
- 不能在Angular中使用Javascript聚焦光标
- 在正确的光标位置重新聚焦CKEditor
- 在 Shiny 中单击操作按钮后,将光标聚焦在文本区域中