如何在rintrojs引导页实现首步Next按钮5秒禁用并切换文本

问题的核心在于：仅设置按钮的disabled=true不足以禁用introjs的Next按钮——introjs依赖自身的introjs-disabled类来控制按钮的可交互状态，且自带的点击事件逻辑会忽略单纯的DOM disabled属性。以下是修复后的完整代码：

library(shiny)
library(rintrojs)

ui <- fluidPage(
  introjsUI(),
  actionButton("start_intro", "Start Intro"),
  h1("Welcome to the Shiny App"),
  p("This is some description of the app.")
)

server <- function(input, output, session) {
  
  steps <- reactive({
    data.frame(
      element = c(NA, "#start_intro"),
      intro = c("Welcome to the app! This first step has a custom button.",
                "This is the start button for the intro tour."),
      position = c("bottom", "bottom")
    )
  })
  
  observeEvent(input$start_intro, {
    introjs(session, 
            options = list(
              steps = steps(),
              nextLabel = "Wait 5 seconds..." 
            ),
            events = list(
              "onstepchange" = I("
                if (this._currentStep === 0) {
                  var that = this;
                  var nextButton = document.querySelector('.introjs-nextbutton');
                  
                  if (nextButton) {
                    // 初始化按钮状态
                    nextButton.innerHTML = 'Wait 5 seconds...';
                    // 添加introjs官方禁用类+DOM disabled属性
                    nextButton.classList.add('introjs-disabled');
                    nextButton.disabled = true;
                    
                    // 临时阻止按钮点击事件（覆盖introjs默认逻辑）
                    const blockClick = function(e) {
                      e.preventDefault();
                      e.stopPropagation();
                    };
                    nextButton.addEventListener('click', blockClick);
                    
                    setTimeout(function() {
                      // 恢复按钮状态
                      nextButton.innerHTML = 'next';
                      nextButton.classList.remove('introjs-disabled');
                      nextButton.disabled = false;
                      // 移除点击阻止监听
                      nextButton.removeEventListener('click', blockClick);
                      // 更新introjs内部配置，避免影响后续步骤
                      that._options.nextLabel = 'next';
                      if (that._introItems[0]) {
                        that._introItems[0].nextLabel = 'next';
                      }
                    }, 5000);
                  }
                }
              ")
            )
    )
  })
}
 
shinyApp(ui = ui, server = server)

关键修改说明 #

1. 事件切换：使用onstepchange替代onbeforechange，确保在步骤完全渲染完成后再修改按钮状态，避免introjs后续逻辑覆盖设置。
2. 禁用逻辑补全：添加introjs专属的introjs-disabled类，这是框架识别按钮禁用状态的核心标识，同时保留disabled属性增强兼容性。
3. 点击事件拦截：临时添加点击事件监听器，阻止按钮的默认点击行为，彻底避免5秒内的无效点击触发步骤切换。

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