移动端表单按回车切换焦点时select控件无法获得焦点问题求助

问题根因 #

移动端表单的原生回车自动聚焦逻辑仅对可输入类控件（text/email/textarea等）生效，select属于选择类控件，默认不被纳入回车跳转序列。tabindex属性仅控制物理键盘Tab键的切换顺序，对移动端的回车跳转逻辑无效果。

可行解决方案 #

通过自定义JS拦截回车事件，手动控制焦点跳转顺序，实现逻辑如下：

1. 给所有需要参与回车跳转的表单元素按期望的跳转顺序添加统一标记，比如data-focus-order属性，属性值按顺序赋值
2. 监听所有表单元素的回车事件，拦截默认行为后，按标记顺序查找下一个需要聚焦的元素并触发聚焦

代码示例 #

首先修改表单元素，添加跳转标记：

<form method="POST" class="rsvp-form js-form" id="rsvp-form" action="php/rsvp.php">
   <div class="d-md-flex justify-content-between">
      <div class="rsvp-form__left">
         <div class="rsvp-form-field">
            <input type="text" name="fullname" placeholder="Full Name" required data-focus-order="1">
         </div>
         <div class="rsvp-form-field">
            <input type="email" name="email" placeholder="Your E-mail" class="js-email" required data-focus-order="2"/>
         </div>
         <div class="rsvp-form-field">
            <input type="text" name="guests" placeholder="Will you be bringing a plus one?" required data-focus-order="3">
         </div>
         <div class="rsvp-form-field">
            <select name="attending" required data-focus-order="4">
               <option value="" disabled selected>When we say 'I do', will we be seeing you?</option>
               <option value="Yes, wouldn't miss it for the world!"></option>
               <option value="No, will celebrate from afar!"></option>
               <option value="ceremony">Ceremony</option>
               <option value="party">Dinner & Party</option>
            </select>
         </div>
      </div>
      <div class="rsvp-form__right">
         <div class="rsvp-form-field h-100">
            <textarea rows="4" placeholder="Your Message" class="h-100" name="message" data-focus-order="5"></textarea>
         </div>
      </div>
   </div>
   <button type="submit" class="rsvp-form-submit js-submit" data-focus-order="6">
   <span>Send</span>
   </button>
</form>

然后添加JS控制逻辑：

// 获取所有带跳转标记的表单元素，按标记顺序排序
const focusElements = Array.from(document.querySelectorAll('[data-focus-order]')).sort((a, b) => {
  return Number(a.dataset.focusOrder) - Number(b.dataset.focusOrder)
})

focusElements.forEach(el => {
  el.addEventListener('keydown', e => {
    // 监听回车事件
    if (e.key === 'Enter' || e.keyCode === 13) {
      e.preventDefault()
      const currentOrder = Number(el.dataset.focusOrder)
      // 查找下一个需要聚焦的元素
      const nextEl = focusElements.find(item => Number(item.dataset.focusOrder) === currentOrder + 1)
      if (nextEl) {
        nextEl.focus()
        // 可选：select聚焦后自动展开选项，方便用户操作
        if (nextEl.tagName === 'SELECT') {
          nextEl.click()
        }
      } else {
        // 已经到最后一个元素，触发表单提交
        document.getElementById('rsvp-form').submit()
      }
    }
  })
})

兼容说明 #

• 该方案可覆盖iOS、Android主流移动端浏览器
• 若不需要select聚焦后自动展开，删除对应特殊处理代码即可
• 后续调整表单元素顺序时，仅需修改data-focus-order属性值，不需要改动JS逻辑

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