如何在Intro.js引导高亮表单时禁用表单输入功能

嘿，这个需求其实很好实现，Intro.js本身提供了丰富的事件钩子，我们可以利用这些钩子在引导步骤切换时动态控制表单的禁用状态。下面是完整的实现方案：

1. 补全后的HTML结构 #

先把你给出的代码补全（假设你的表单包含常见的输入控件）：

<link href="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.5.0/introjs.min.css" rel="stylesheet">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.5.0/intro.min.js"></script>

<!-- 带引导步骤的表单容器 -->
<div class="card" id="div3" data-step="2" data-intro="Tell us your information.">
  <ul class="list-group">
    <li class="list-group-item">
      <label for="username">Username:</label>
      <input type="text" id="username" class="form-control" placeholder="Enter your username">
    </li>
    <li class="list-group-item">
      <label for="email">Email:</label>
      <input type="email" id="email" class="form-control" placeholder="Enter your email">
    </li>
    <li class="list-group-item">
      <label for="bio">Bio:</label>
      <textarea id="bio" class="form-control" rows="3"></textarea>
    </li>
  </ul>
</div>

<!-- 可选：手动启动引导的按钮，也可以改成页面加载自动启动 -->
<button id="startIntroBtn">Start Guide</button>

2. 核心JavaScript实现 #

关键是利用Intro.js的事件钩子，在进入/离开步骤时控制表单状态：

// 用来临时保存被我们禁用的表单元素，避免影响原本就禁用的控件
let disabledFormElements = [];

// 初始化Intro.js实例
const introInstance = introJs();

// 【进入新步骤前】：禁用当前步骤高亮区域内的所有表单控件
introInstance.onbeforechange(function(targetElement) {
  // 清空上一步的记录
  disabledFormElements = [];
  
  // 查找当前高亮区域内的所有可交互表单元素
  const formControls = targetElement.querySelectorAll('input, textarea, select, button');
  
  formControls.forEach(control => {
    // 只禁用原本可用的控件
    if (!control.disabled) {
      control.disabled = true;
      disabledFormElements.push(control);
    }
  });
});

// 【离开当前步骤后】：恢复之前禁用的表单控件
introInstance.onafterchange(function() {
  disabledFormElements.forEach(control => {
    control.disabled = false;
  });
  disabledFormElements = [];
});

// 【引导完成/手动退出】：确保所有表单控件都恢复可用（防止引导中断后表单一直禁用）
introInstance.oncomplete(function() {
  disabledFormElements.forEach(control => {
    control.disabled = false;
  });
});

introInstance.onexit(function() {
  disabledFormElements.forEach(control => {
    control.disabled = false;
  });
});

// 启动引导（如果要页面加载自动启动，把这段放到DOMContentLoaded事件里）
document.getElementById('startIntroBtn').addEventListener('click', function() {
  introInstance.start();
});

// 页面加载自动启动的写法：
// document.addEventListener('DOMContentLoaded', function() {
//   introInstance.start();
// });

3. 关键细节说明 #

• 精准控制禁用范围：只针对当前高亮步骤的目标元素内的表单控件操作，不会影响页面其他区域的元素
• 避免误操作原本禁用的控件：我们只禁用原本可用的控件，恢复时也只恢复这些控件，不会改变页面原有状态
• 覆盖所有退出场景：不管是引导正常完成，还是用户中途点击退出按钮，都会恢复表单的可用状态
• 兼容多种表单控件：选择器覆盖了input、textarea、select、button等所有常见的可交互表单元素

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