如何为selectizeInput添加onBlur事件？现有代码触发异常

问题原因 #

• selectizeInput基于selectize.js生成，原始#si元素被隐藏，实际交互的是动态生成的内部输入框，直接绑定#si的blur事件无法触发。
• textInput的blur事件仅触发一次，是因为Shiny可能重新渲染组件，导致原绑定的事件监听被移除。

修改方案 #

1. 处理selectizeInput的blur事件 #

通过selectize官方API绑定blur事件，确保监听实际交互的组件元素。

2. 处理textInput的blur事件 #

使用事件委托绑定到父级元素（如document），即使组件重新渲染，事件监听依然有效。

完整修改代码 #

library(shiny)

ui <- fluidPage(
  selectizeInput("si", label="letters", choices = letters),
  textInput("ti", label = "ti"),
  tags$script(HTML(
    '
    // 等待Shiny加载完成后绑定selectize事件
    $(document).on("shiny:connected", function() {
      // 获取selectize实例
      const selectizeInstance = $("#si")[0].selectize;
      // 绑定blur事件
      selectizeInstance.on("blur", function() {
        console.log("selectizeInput失去焦点");
      });
    });
    
    // 用事件委托处理textInput的blur事件
    $(document).on("blur", "#ti", function() {
      console.log("textInput失去焦点");
    });
    '
  ))
)

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

shinyApp(ui, server)

代码说明 #

• shiny:connected事件确保在Shiny完全初始化后再获取selectize实例，避免DOM未就绪的问题。
• selectize的on("blur")是官方推荐的事件绑定方式，直接监听组件的失焦动作。
• 事件委托方式绑定textInput的blur事件，即使组件被重新渲染，新生成的#ti元素依然会触发事件。

内容的提问来源于stack exchange，提问作者Noskario