iOS/WebKit输入匹配datalist项时表单动作不触发问题求助

结论 #

这是iOS WebKit专属的兼容性Bug，并非表单标签配置错误。

问题1：保留HTML form语义的Workaround #

可以通过监听输入框的键盘事件和输入事件，手动触发原生表单提交，同时保留form的语义和action函数的正常执行：

function FixedForm() {
  const action = async (formData) => {
    alert(formData.get('search'))
  }

  const handleKeyDown = (e) => {
    if (e.key === 'Enter') {
      // 触发原生表单提交，保留form语义
      e.currentTarget.form.requestSubmit();
    }
  }

  const handleInput = (e) => {
    const inputValue = e.target.value;
    const datalistOptions = Array.from(document.getElementById('search').options);
    // 检查是否选中了datalist中的选项
    const isMatchedOption = datalistOptions.some(opt => opt.value === inputValue);
    
    if (isMatchedOption) {
      // 延迟提交确保值同步到formData
      setTimeout(() => e.target.form.requestSubmit(), 0);
    }
  }

  return (
    <form action={action}>
      <input 
        list="search" 
        name="search" 
        type="search"
        onKeyDown={handleKeyDown}
        onInput={handleInput}
      />
      <button type="submit">Search</button>
      <datalist id="search">
        <option value="foo" />
        <option value="bar" />
        <option value="baz" />
      </datalist>
    </form>
  )
}

关键说明： #

• 使用form.requestSubmit()而非form.submit()，前者会触发表单的原生验证和action函数，完全保留form的语义流程；后者会绕过form的action属性，无法调用你定义的异步action。
• setTimeout延迟提交是为了确保输入框的值已经同步到formData中，避免获取到未更新的旧值。
• 同时覆盖了两种异常场景：手动输入匹配内容按Enter键、选中键盘上方的datalist建议。

问题2：表单配置修正 #

你的表单标签配置完全符合HTML规范：

• input的list属性与datalist的id正确对应
• input设置了name属性，确保能被formData正确捕获
• type="search"的使用符合搜索输入的语义要求

不存在配置错误导致的提交问题，问题根源是iOS WebKit的兼容性Bug。

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