javascript - 滚动条上错误的输入自动完成位置(chrome)

Question

我在输入文本的默认自动完成方面遇到了一些麻烦。滚动时它不会相应地移动。我希望自动完成文本保持在输入的正下方。有没有办法做到这一点？这发生在我的 Chrome 浏览器版本 57.0.2987.133

fiddle

<form action="/action_page.php" autocomplete="on">
    First name:<input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
    E-mail: <input type="email" name="email" ><br>
    <input type="submit">  
    <div style="height:150px">
    </div>
</form>

Answer 1

浏览器不允许您访问自动完成工具提示，因此您可以使用封闭容器滚动它。 默认行为是在滚动 window 时删除工具提示，但它与内部 document 容器的工作方式不同，例如您的情况下的 form 。 我建议强制执行一般行为，删除工具提示，只需从表单的 onscroll 事件属性中的事件输入字段中删除和恢复焦点。

form {
  height: 200px;
  overflow: auto;
}

<form action="/action_page.php" autocomplete="on"
        onscroll="var a = document.activeElement; a.blur(); a.focus();">
    <div style="height:50px"></div>
    First name:<input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
    E-mail: <input type="email" name="email" ><br>
    <input type="submit">
    <div style="height:150px"></div>
</form>