移动端Safari中通过代码填充登录表单账号密码后，提交时无法识别已填充值

这种情况我之前做WebView自动填充的时候也踩过坑！核心问题就是Safari的安全策略对JS直接修改表单输入框的行为管得特别严——它会把JS硬塞的值和用户真实输入的值区分开，导致表单提交时，不管是网站的校验逻辑还是浏览器的内置校验，都认不到你填的内容。

给你几个针对性的解决思路和代码调整建议：

一、模拟更贴近真实用户的输入事件流程 #

你之前尝试了keydown、change这些事件，但Safari更吃input事件这一套——这是输入框内容变化时原生会触发的核心事件，比change更能让浏览器觉得“这是真实输入的内容”。

调整后的代码可以改成这样：

var usernameEle = document.querySelector('[autocomplete="username"]');
var passwordEle = document.querySelector('[autocomplete="current-password"]'); // 记得同步处理密码框

if (usernameEle) {
  // 严格按照用户操作顺序来：聚焦→设值→触发输入事件→触发变更事件→失焦
  usernameEle.focus();
  usernameEle.value = `${username}`;
  // 触发input事件，这是让Safari认值的关键
  usernameEle.dispatchEvent(new InputEvent('input', { bubbles: true, cancelable: true }));
  // 触发change事件同步表单状态
  usernameEle.dispatchEvent(new Event('change', { bubbles: true, cancelable: true }));
  usernameEle.blur();

  // 密码框用完全一致的逻辑处理
  if (passwordEle) {
    passwordEle.focus();
    passwordEle.value = `${password}`;
    passwordEle.dispatchEvent(new InputEvent('input', { bubbles: true, cancelable: true }));
    passwordEle.dispatchEvent(new Event('change', { bubbles: true, cancelable: true }));
    passwordEle.blur();
  }

  // 给Safari一点时间同步内部表单状态，不用太长的延时
  setTimeout(() => {
    // 额外触发一次表单的change事件，确保整个表单状态都同步到位
    const loginForm = usernameEle.closest('form');
    if (loginForm) {
      loginForm.dispatchEvent(new Event('change', { bubbles: true }));
    }
  }, 50);
}

二、尽量在用户交互上下文里执行填充 #

如果你的填充逻辑是页面加载完成后自动跑的，Safari的安全策略可能直接忽略这种“无用户触发”的表单修改。最好把填充操作绑定到某个用户交互上，比如WebView里的“自动填充”按钮点击事件，或者用户第一次点击输入框的时候触发——在用户交互的上下文里，Safari会更认可你的修改操作。

三、确保事件参数的完整性 #

触发事件的时候一定要加上bubbles: true和cancelable: true，这样事件才能像原生事件一样冒泡到父元素，被网站的表单监听逻辑捕获到。你之前的keydown事件只传了key，其实还应该补全冒泡参数，不过更推荐直接用InputEvent代替它。

为什么之前的代码没效果？ #

你之前模拟的keydown事件是按下“e”键，这和真实的输入流程完全不搭，Safari很容易识别出这是伪造的；而且重复触发两次change事件也没意义，重点是触发对的事件类型，而不是次数。

按上面的方法调整后，应该就能让Safari和网站的表单逻辑都识别到你填充的账号密码了。

备注：内容来源于stack exchange，提问作者Ahti Kara