Rails中remote: true在iOS端失效，桌面端正常，求排查原因

这个问题我之前帮不少开发者排查过，iOS Safari下Rails远程表单失效、反而以GET请求跳转的情况，大概率是这几个原因导致的，咱们一个个拆解：

1. Turbo/UJS的兼容性冲突 #

如果你的项目是Rails 7及以上版本，默认用Turbo替代了老版本的Rails UJS来处理远程请求。但Turbo和UJS的事件逻辑差异很大，如果你的代码里同时加载了两者，或者Turbo的初始化出现问题，就可能在iOS Safari这种对事件处理更敏感的环境里失效。

另外，Turbo默认的表单处理逻辑是用Turbo Stream/Frame更新页面，而非传统的AJAX执行JS。如果你的后端返回的是纯JavaScript响应，可能需要给表单加上data-turbo="false"，让Turbo不介入，转而用UJS处理（前提是你正确加载了UJS）。

2. iOS Safari的默认提交行为未被阻止 #

远程表单的核心是用JavaScript阻止表单的默认submit行为，再通过AJAX发送请求。但iOS Safari有几个特殊场景会绕过这个逻辑：

• 当表单只有一个输入框时，用户点击键盘的「Go」/「完成」按钮提交，浏览器可能直接触发原生提交，跳过JS监听；
• 表单没有显式的<input type="submit">按钮，浏览器自动生成的虚拟提交按钮，其事件触发逻辑和原生按钮有差异。

3. 触摸事件与点击事件的冲突 #

iOS Safari会把触摸事件转化为点击事件，但有300ms延迟。如果你的项目里有自定义的touchstart/touchend事件监听，并且阻止了事件冒泡，就可能干扰Turbo/UJS对表单submit事件的捕获，导致远程逻辑失效。

4. JavaScript加载错误或顺序问题 #

iOS Safari对JS错误的容忍度比桌面浏览器低，比如某个脚本加载失败、语法错误，都会导致后续的Turbo/UJS初始化代码无法执行。这时候桌面端可能因为浏览器的容错机制还能正常工作，但iOS端直接罢工。

针对性解决方案 #

• 显式添加提交按钮：在表单里加上提交按钮，让用户通过点击按钮提交，避免依赖键盘的自动提交行为：

  = form_tag("two", remote: true) do
    = email_field_tag "email"
    = submit_tag "提交"
  

• 检查Turbo/UJS的配置：
  • Rails 7+：确保application.js里只加载Turbo（去掉//= require rails-ujs），如果需要纯AJAX执行JS，给表单加data-turbo="false"并重新引入UJS；
  • 老版本Rails：确保rails-ujs在所有自定义脚本之前加载，没有被其他脚本覆盖事件。
• 手动阻止默认行为并发送AJAX：如果上述方法都不行，可以自己写JS兜底：

  document.querySelector('form[action="/two"]').addEventListener('submit', function(e) {
    e.preventDefault(); // 强制阻止默认提交
    const csrfToken = document.querySelector('meta[name="csrf-token"]').content;
    fetch(this.action, {
      method: this.method,
      headers: {
        'X-CSRF-Token': csrfToken,
        'Accept': 'application/javascript'
      },
      body: new FormData(this)
    }).then(res => res.text()).then(js => eval(js)); // 执行返回的JS
  });
  

• 排查JS错误：用iOS Safari的Web Inspector连接设备，查看控制台有没有报错，比如缺失的脚本、语法错误等。
• 禁用iOS自动填充：给输入框加上属性，避免系统自动填充干扰表单事件：

  = email_field_tag "email", nil, autocomplete: "off", autocorrect: "off"
  

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