单击闪亮的操作按钮后将光标聚焦在文本区域

2024-04-20

无论如何,我都不是 html 或 JavaScript 方面的专家。因此,我希望您能就这个问题得到帮助。

我认为我应该提供应用程序的较小版本,以便能够解释问题。这是一个简单应用程序的 app.R,它允许用户在文本区域中写入一个单词。单词的第一个字母将自动显示为操作按钮的标签,如果用户单击操作按钮,则 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”,所以焦点加载没有问题。当您单击操作按钮时,光标不再位于文本区域中。对于这个简单的应用程序来说,这似乎是不必要的,但对于实际的应用程序来说,这很重要,我希望在用户单击操作按钮后将光标返回到文本区域中。

问题再次是,每当应用程序的用户单击操作按钮时,光标就会从文本区域消失,并且应用程序的用户必须单击文本区域才能恢复光标并继续他/她的输入。我希望通过保持光标始终处于活动状态并集中在文本区域来为用户节省额外的点击,无论用户使用应用程序界面的其他元素多少次。

Research:网上有很多关于如何控制光标位置的帖子。在这些帖子中,我认为,如果我错了请纠正我,这种方法几乎是与我希望实现的目标最相关的方法:

http://www.mediacollege.com/internet/javascript/form/focus.html 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 中?当然,我必须为文本区域和按钮分配一个表单,并且我将相应地更改文本区域和按钮的名称。我只需要使上面的 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)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

单击闪亮的操作按钮后将光标聚焦在文本区域 的相关文章

随机推荐

  • 离开网站时弹出

    我遇到了 JavaScript 问题 我想要一个脚本 该脚本将在退出整个网站时弹出一条带有问题的消息 如果访问者回答 否 则网页将关闭 如果他回答 是 他将被重定向到另一个页面 我找到了一个例子http www pgrs net 2008
  • xcode CollectionViewController rollToItemAtIndexPath 不工作

    我创建了一个CollectionView控制并用图像填充它 现在我想在开始时滚动到特定索引处的项目 我已经尝试过scrollToItemAtIndexPath如下 self myFullScreenCollectionView scroll
  • 无偏返回 n 个随机正数 (>=0) 的列表,使得它们的总和 == 总和

    我正在寻找一种算法或建议来改进我的代码以生成随机数列表 这些随机数的总和等于某个任意数 对于下面的代码 它总是有偏差 因为第一个数字往往会更高 有没有办法让选号更高效 usr bin python Generate a list of nu
  • 使用 sed 替换 shell 脚本中的特殊字符

    我正在尝试编写一个 shell 脚本 它将替换我使用 sed 选择的任何字符 字符串 我的第一次尝试除了特殊字符之外都有效 我一直在尝试使用 sed 来修复特殊字符 以便它们也能被搜索或替换 我决定简化脚本以进行测试 只处理一个有问题的角色
  • OpenGL:多个顶点的单个顶点属性?

    我有一个接受以下属性的顶点着色器 a posCoord 顶点位置 a texCoord 纹理坐标 传递给片段着色器 a alpha 透明度因子 传递给片段着色器 我正在渲染的对象都是 广告牌 一对直角三角形组成一个矩形 我正在使用一次调用g
  • 使用 TopMost = true 打开 WinForms 表单但不让它抢走焦点?

    我有一个在用户屏幕上弹出的表单 并且有TopMost true 但它抢走了焦点 我怎样才能得到它not当它第一次出现时就抢走了焦点 这对我有用 它提供了 TopMost 但没有焦点窃取 protected override bool Sho
  • 为什么将 static libcurl.a 添加到 xcode 7.2 示例项目中会添加 libcurl.4.dylib 依赖项

    我一直试图通过将 libcurl a 添加到我的 Xcode 7 2 项目来消除对 libcurl 4 dylib 的任何依赖 我构建了一个全新的 libcurl 并将其放置在 usr local lib 中 标头位于 usr local
  • 在 Spring 中配置特定的内存数据库用于测试目的

    我该如何配置我的春季启动应用程序 以便当我运行时单元测试它将使用在记忆中数据库如H2 HSQL但当我跑步时春季启动应用程序它将使用生产数据库PostgreSQL MySQL 为此可以使用弹簧型材 这将是一种具体的方式 具有特定于环境的属性文
  • pycharm:在“调试”模式下从标准输入读取

    我正在 PyCharm 中调试此脚本 import sys def read in lines sys stdin readlines for i in range len lines lines i lines i replace n r
  • “sys.excepthook”和线程

    我正在使用Python 2 5并尝试使用自定义excepthook在我的程序中 在主线程中它工作得很好 但在以线程模块启动的线程中 通常excepthook叫做 这是一个显示问题的示例 取消注释该注释会显示所需的行为 import thre
  • 带图像的 SVG 进度条

    我正在尝试使用 SVG 创建进度条 弧 我目前的进度条正在工作 它正在使用存储在数据属性中的值移动所需的量 并且看起来相当不错 虽然我试图让图像随着酒吧的弧线移动 图像应从 0 开始 并移动到完成点 例如 50 即位于顶部 div clas
  • 如何创建一个从 NSWindow 模态弹出的 NSPanel(Cocoa 编程)

    就像在 NSWindow 中单击按钮后显示的 NSPanel 一样 我查了很多 但没有简单的例子 谢谢你的帮助 可以这样做 IBAction showButtonAction id sender NSApplication sharedAp
  • Chrome 浏览器开发者工具:脚本多次出现

    当使用 Chrome 的开发者工具调试 Javascript 时 当我更改 重新加载 测试代码时 脚本 列表往往会添加每个脚本的多次出现 Safari 使用相同的基本工具集 但不这样做 某个脚本在此列表中出现 10 次并不陌生 发生这种情况
  • 使用新数据重新加载 ngx-graph

    我正在尝试泳道 ngx graph 在我的应用程序中用户可以删除或添加节点 根据删除或添加操作 我将相应地更新我的数据 现在真正的问题是如何在不刷新整个页面的情况下刷新图表 您可以使用以下方法更新它update 图表的选项 HTML
  • ASP.NET MVC3 部分视图命名约定

    我是 MVC 开发的新手 所以请耐心等待 真的有必要将我的部分视图命名为 Action cshtml 与 下划线 以遵守命名约定 这是我的问题我有一个控制器 StudentController 和一个操作 List 它有一个名为 List
  • 将多个正则表达式合并为一个

    我正在尝试编写一个代码将字符串连接成拉丁诗句 我已经处理了一些限制 但是我没有得到所需的输出 我的代码如下
  • Swift:标准数组的二分搜索?

    我有一个排序数组 想对其进行二分搜索 所以我问 Swift 库中是否已经有一些东西可以使用 比如排序等 或者是否有可用的类型无关版本 当然我可以自己写 但我喜欢避免再次重新发明轮子 这是我最喜欢的二分搜索实现 它不仅对于查找元素很有用 而且
  • 类型错误:$(...).selectize 不是函数

    我将 selectize rails gem 安装到了我的 Rails 应用程序中 并且正在尝试使其正常工作 我的网络控制台中不断出现此错误 TypeError selectize is not a function 并且浏览器中没有任何反
  • 使用 xcodebuild 构建等待 /"runContextManager.runContexts" 超时

    我正在设置我的 iphone 项目以与 hudson 一起运行 我的构建脚本在本地运行良好 但是当在我的雪豹服务器 mac 上执行以下命令时 xcodebuild sdk iphoneos4 3 workspace Moments xcwo
  • 单击闪亮的操作按钮后将光标聚焦在文本区域

    无论如何 我都不是 html 或 JavaScript 方面的专家 因此 我希望您能就这个问题得到帮助 我认为我应该提供应用程序的较小版本 以便能够解释问题 这是一个简单应用程序的 app R 它允许用户在文本区域中写入一个单词 单词的第一