使用键盘快捷键循环选择下拉列表的选项

问题描述 投票:0回答:1

我有一个 RShiny 下拉菜单(一个 selectInput 对象),我希望能够使用键盘快捷键在选项之间切换。

就我而言,最好的选择是让组合键循环遍历可用选项。

到目前为止,我已经成功使用 selectize 将各个键分配给下拉列表中的各个选项。这是我添加到 FluidPage 中的代码片段:

tags$script(HTML("$(function(){ 
  $(document).keyup(function(e) {
      if(e.which == 49){
        var selectized = $('#selector_name').selectize();
        selectized[0].selectize.setValue(1);
        
      } 
    });
  })"))

我试图在最里面的 if 内执行 switch 语句,如下所示:

if <current_value> = 1 {
   selectized[0].selectize.setValue(1);
} else if <current_value> = 2 {
    ...
}

但是我不知道如何访问

此外,上面的代码为事件分配了一个按键,但我真的更喜欢使用组合键,例如 SHIFT + D。

编辑:添加了最小工作示例

library(shiny)

ui <- fluidPage(
  
  # keyboard shortcuts for selectors
  # Key 1 for option 1
  tags$script(HTML("$(function(){ 
    $(document).keyup(function(e) {
      if(e.which == 49){
        var selectized = $('#dropdown').selectize();
        selectized[0].selectize.setValue(1);
        
      } 
    });
  })")),
  
  # key 2 for option 2
  tags$script(HTML("$(function(){ 
    $(document).keyup(function(e) {
      if(e.which == 50){
        var selectized = $('#dropdown').selectize();
        selectized[0].selectize.setValue(2);
        
      } 
    });
  })")),
    
    # define the selector
   selectInput(inputId = "dropdown",
                             label = "Dropdown",
                             choices = c(1,2),
                             selected = 0)
              
  )
  
  server <- function(input, output, session) {}
  
  shinyApp(ui, server)
javascript html shiny selectize.js
1个回答
0
投票

可能有一种方法可以纯粹用 javascript 来实现(我洗耳恭听!),但另一种方法是在 javascript 中捕获按键,但更新 R 中选定的条目:

library(shiny)

choices <- c(1, 2, 3)

ui <- fluidPage(

  tags$script(HTML("
      $(document).on('keydown', function(e) {
        if( e.shiftKey && e.key === 'D'){
          Shiny.onInputChange('dKey', new Date().getTime());
        }
      })
    ")),

  selectInput(inputId = "dropdown",
              label = "Dropdown",
              choices = choices,
              selected = 0)
)

server <- function(input, output, session) {

  observeEvent(input$dKey, {
    index <- match(input$dropdown, choices)
    if (index < length(choices)){
      next_index <- index + 1
    } else {
      next_index <- 1
    }
    updateSelectInput(session, "dropdown", selected = choices[next_index])
  })
}

shinyApp(ui, server)
© www.soinside.com 2019 - 2024. All rights reserved.