模态框操作后Tab焦点异常，如何设置焦点到指定元素？

问题原因 #

直接设置tabindex序号无效，是因为模态框关闭后，浏览器默认会将焦点归还给触发模态框的元素，不会自动遵循你设置的tabindex顺序，必须通过JavaScript手动控制焦点跳转。

解决方案 #

利用Bootstrap模态框的hidden.bs.modal事件（模态框完全关闭后触发），在事件回调中手动将焦点设置到「打开计算器」元素上，同时处理提交按钮的逻辑：

1. 绑定模态框关闭事件
   在页面的JavaScript代码中添加以下逻辑：

   // 获取模态框和目标元素
   const consentModal = document.getElementById('special-needs-consent-form');
   const feeCalculatorBtn = document.getElementById('feeCalculator');
   
   // 监听模态框关闭完成事件
   consentModal.addEventListener('hidden.bs.modal', function() {
     // 确保目标元素存在时设置焦点
     if (feeCalculatorBtn) {
       feeCalculatorBtn.focus();
     }
   });
   

2. 处理提交按钮逻辑
   提交按钮需要先完成业务逻辑，再关闭模态框，焦点会自动触发上面的关闭事件：

   document.getElementById('consent-submit-btn').addEventListener('click', function() {
     // 先执行提交逻辑（比如表单验证、接口请求）
     // ... 你的提交代码 ...
   
     // 提交完成后关闭模态框
     $(consentModal).modal('hide');
   });
   

3. 补充说明

   • 如果你用的是jQuery版本的Bootstrap，也可以用jQuery写法绑定事件：

     $('#special-needs-consent-form').on('hidden.bs.modal', function() {
       $('#feeCalculator').focus();
     });
     

   • 确认当前页面分支渲染了feeCalculator元素（你的代码是Razor条件渲染，要保证触发时目标元素存在）。

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