如何在滚动时实用地隐藏浏览器的自动填充弹出窗口？答案

【问题标题】：How to pragmatically hide browser's autofill popup on scroll?如何在滚动时实用地隐藏浏览器的自动填充弹出窗口？
【发布时间】：2018-09-24 17:37:43
【问题描述】：

即使在页面向下滚动后，浏览器的自动填充弹出窗口也会保持在同一位置。请参考图片。标记的自动填充弹出窗口用于名字，它既不会隐藏在滚动页面上，也不会停留在名字下方。

另外，我注意到自动填充弹出窗口略有不同。在许多站点中，我在自动填充弹出窗口中看不到“自动填充设置”选项。

我试过google'ling，但没有找到满意的答案。

所以问题是

如何在滚动时隐藏浏览器的自动填充？
如何摆脱弹出窗口中的“自动填充设置”选项。（请参考图片。）

谢谢。

PS：我不想禁用自动填充弹出窗口。而且这个问题与autocomplete="off"无关

【问题讨论】：

我不认为你可以禁用它...
Disabling Chrome Autofill的可能重复
@GetOffMyLawn 如果我不能禁用它也没关系。但是自动填充应该隐藏在滚动上。这个问题与禁用它无关，如您提到的链接中所述。
我明白了，你想在滚动时关闭它吗？如果是这样，您可以从该字段中移除焦点，这可能会解决问题，例如 myInput.blur() 或 window.focus()
@GetOffMyLawn，这适用于具有少量字段的表单。如果表格太大，那就不太理想了。我们无法在每个输入字段上触发模糊事件。

标签： javascript google-chrome browser

【解决方案1】：

您可以尝试从元素中移除焦点。如果您想在用户停止滚动后将焦点返回给元素，您可以在滚动回调中使用超时，并再次赋予元素焦点。

let active, timer
window.addEventListener('scroll', () => {
  Array.from(document.querySelectorAll('#main-form input')).forEach(input => {
    if (document.activeElement == input) active = input
    input.blur()
  })
  clearTimeout(timer)
  timer = setTimeout(() => active && active.focus(), 200)
})

<form id="main-form">
  <p><input type="text"></p>
  <p><input type="text"></p>
  <p><input type="text"></p>
  <p><input type="text"></p>
  <p><input type="text"></p>
  <p><input type="text"></p>
  <p><input type="text"></p>
  <p><input type="text"></p>
  <p><input type="text"></p>
  <p><input type="text"></p>
  <p><input type="text"></p>
  <p><input type="text"></p>
  <p><input type="text"></p>
  <p><input type="text"></p>
  <p><input type="text"></p>
  <p><input type="text"></p>
  <p><input type="text"></p>
  <p><input type="text"></p>
  <p><input type="text"></p>
  <p><input type="text"></p>
  <p><input type="text"></p>
  <p><input type="text"></p>
  <p><input type="text"></p>
  <p><input type="text"></p>
</form>

注意：如果您不想在滚动后将焦点返回给元素，请删除 if 语句和两个 Timeouts。

【讨论】：