Orbeon Forms：如何在回答问题后自动聚焦下一题

• 核心逻辑：在翻页操作完成后，自动定位当前页面的答题交互元素，调用其focus()方法即可实现自动聚焦。

• 原生JavaScript实现示例
  假设翻页按钮统一使用类名next-page-btn，每页的答题元素（输入框、文本域等）使用类名question-element：

  // 绑定翻页按钮点击事件
  document.querySelectorAll('.next-page-btn').forEach(btn => {
    btn.addEventListener('click', () => {
      // 执行你的翻页逻辑（比如隐藏当前页、显示下一页）
      // ... 此处替换为实际翻页代码 ...
  
      // 翻页完成后聚焦当前题的交互元素
      const currentQuestion = document.querySelector('.active-page .question-element');
      if (currentQuestion) {
        currentQuestion.focus();
      }
    });
  });
  

  如果是提交当前题后跳转至新页面的场景，可在新页面加载完成后执行聚焦：

  window.addEventListener('load', () => {
    const currentQuestion = document.querySelector('.question-element');
    if (currentQuestion) {
      currentQuestion.focus();
    }
  });
  

• 关键注意点

  • 确保答题元素支持聚焦：<input>、<textarea>、<select>默认支持聚焦；自定义交互组件（如自定义单选框）可添加tabindex="0"属性使其可聚焦。
  • 单页应用（SPA）场景下，无需监听load事件，只需在页面切换完成的回调中执行聚焦逻辑即可。
  • 若题目包含多个交互项（如多选框组），可选择聚焦到第一个选项，或给题目容器添加tabindex来提升整体体验。

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