Bootstrap+jQuery多步骤表单：邮箱输入框二次点击自动聚焦失效问题

这种情况我做多步骤表单时也碰到过，大概率是代码逻辑或者组件交互冲突，导致输入框的正常点击/聚焦被阻止了。给你几个具体的排查和解决方向：

• 检查事件阻止逻辑
  先看看你处理autofocus移除的代码里，有没有不小心给邮箱输入框或者它的父元素加了阻止默认行为的逻辑，比如event.preventDefault()或者return false。可以打开浏览器控制台的「元素」面板，找到邮箱输入框，查看它绑定的所有click、focus事件，有没有异常的监听函数。

• 排查Bootstrap组件的交互冲突
  如果你的多步骤表单用了Bootstrap的步骤组件或者模态框，有些组件的默认逻辑会在步骤切换时修改元素的交互状态。你可以检查第一个步骤的容器，看看autofocus移除后，是不是被加上了pointer-events: none的CSS样式，或者disabled类——这都会导致输入框无法被点击。

• 修正autofocus的处理方式
  不要直接用removeAttr('autofocus')来移除自动聚焦，改用blur()方法让输入框失去焦点，同时确保后续可以正常触发聚焦：

  // 页面加载后延迟执行，避免干扰浏览器默认的autofocus行为
  setTimeout(() => {
    const $emailInput = $('#email-input');
    $emailInput.blur();
    // 确保输入框能正常响应点击和聚焦事件
    $emailInput.off('click focus').on('click focus', function() {
      $(this).focus();
    });
  }, 100);
  

• 检查元素层级是否被遮挡
  有时候页面上的透明遮罩层、悬浮元素会覆盖在输入框上面，导致点击事件无法触发。用浏览器的元素选择器选中邮箱输入框，看看它的z-index值是不是比周围元素低，或者父元素有没有设置overflow: hidden导致输入框被部分遮挡。

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