滚动时输入自动完成位置错误(chrome)

2024-05-17

我在输入文本的默认自动完成功能方面遇到了一些麻烦。滚动时它不会相应移动。我希望自动完成文本保留在输入的正下方。有办法做到这一点吗?我在 Chrome 浏览器版本 57.0.2987.133 中发生这种情况

fiddle https://jsfiddle.net/elarmando/toacvd3g/3/

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

浏览器不允许您访问自动完成工具提示,因此您可以使用封闭容器滚动它。 默认行为是在滚动时删除工具提示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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

滚动时输入自动完成位置错误(chrome) 的相关文章