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

Question

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

另外，我注意到自动填充弹出窗口略有不同。在许多网站上，我都没有看到＆＃34;自动填充设置＆＃34;自动填充弹出窗口中的选项。

我试过google＆＃39; ling，但没有找到满意的答案。

所以问题是

1. 如何在滚动时隐藏浏览器的自动填充功能？
2. 如何摆脱＆＃34;自动填充设置＆＃34;弹出窗口中的选项。 （请参考图片。）

谢谢。

PS：我不想禁用自动填充弹出窗口。此问题与autocomplete="off"

无关

Answer 1

您可以尝试从元素中删除焦点。如果要在用户停止滚动后将焦点重新放回元素，则可以在滚动回调中使用超时，并再次给予元素焦点。

＆＃13;

＆＃13;

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)
})

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

注意：如果您不希望在滚动后将焦点重新放回元素，请删除if语句和两个超时。