You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何禁止用户通过selectizeInput取消已选选项?

如何禁用selectizeInput中按退格/删除键删除选项的默认行为?

可以通过自定义selectize的初始化钩子,拦截退格(Backspace)和删除(Delete)键的默认事件来实现需求。以下是具体实现方案:

核心思路

利用selectize的onInitialize配置项绑定键盘按键事件,当检测到用户按下Backspace或Delete键时,阻止其默认行为,从而禁用通过按键删除选项的功能,仅保留自定义按钮的增删逻辑。

完整代码示例

library(shiny)

ui <- fluidPage(
  selectizeInput(
    inputId = "group_select",
    label = "已选分组",
    choices = NULL,
    multiple = TRUE,
    options = list(
      # 初始化时绑定按键拦截逻辑
      onInitialize = I("function() {
        var inputElement = this.$input;
        inputElement.on('keydown', function(event) {
          // 匹配Backspace(键码8)和Delete(键码46)
          if (event.keyCode === 8 || event.keyCode === 46) {
            event.preventDefault(); // 阻止默认删除行为
            event.stopPropagation(); // 停止事件传播
          }
        });
      }")
    )
  ),
  actionButton("add_group", "添加分组"),
  actionButton("remove_group", "移除选中分组")
)

server <- function(input, output, session) {
  # 存储可选分组列表
  available_groups <- reactiveVal(c("分组A", "分组B", "分组C"))
  
  # 添加分组逻辑
  observeEvent(input$add_group, {
    new_group <- paste0("分组", length(available_groups()) + 1)
    available_groups(c(available_groups(), new_group))
    updateSelectizeInput(session, "group_select", choices = available_groups())
  })
  
  # 移除选中分组逻辑
  observeEvent(input$remove_group, {
    selected <- input$group_select
    if (!is.null(selected)) {
      available_groups(setdiff(available_groups(), selected))
      updateSelectizeInput(session, "group_select", choices = available_groups(), selected = NULL)
    }
  })
}

shinyApp(ui, server)

关键说明

  • onInitialize是selectize提供的初始化钩子,用于在组件加载完成后执行自定义JavaScript逻辑
  • 通过event.preventDefault()和event.stopPropagation()彻底阻止按键的默认删除行为,确保用户只能通过“移除”按钮删除选项
  • 使用I()包裹JavaScript代码,避免Shiny自动转义代码内容

内容的提问来源于stack exchange,提问作者D.sen

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.26 05:22:15