滚动（铬）上输入自动完成位置错误

Question

我在输入文本的默认自动完成方面遇到了一些麻烦。滚动时它不会相应移动。我希望自动完成文本保持在输入下方。有没有办法实现这个目标？我在Chrome浏览器Versión57.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>

Answer 2

这些自动填充工具提示是Google Chrome的原生实现，与其他浏览器一样，可以使用css / js进行更改。这个事实为您提供了解决问题的两种可能性：

清理标记。表单的语义和清晰html标记对于错误抵抗至关重要。否则，如果用户习惯使用浏览器默认自动完成功能，那么这是一个很好的解决方案。除此之外，自动完成脚本不适用于fornames或lastnames，更像是搜索/从列表中选择项目。一个干净且基本安全的表单标记可能看起来像jsfiddle：

实施自动填充javascript插件。您可以通过在文档中添加nessecary信息来实现大量脚本，以便为用户提供更好的体验。但令人遗憾的是，将这些用于名称并不常见。

form {
  background: #eee;
  border: 1px solid #ddd;
  padding: 10px;
  max-width: 250px;
}

.form-row {
  margin-bottom: 10px;
}

label {
  display: block;
  margin-bottom: 4px;
}

input[type="text"],
input[type="email"]{
  padding: 8px;
  width: 100%;
  box-sizing: border-box;
}

<form action="/action_page.php" autocomplete="on">

  <div class="form-row">
    <!-- labels on top of inputs can improve usability alot -->
    <label for="fname">First name:</label>
    <input type="text" name="fname" id="fname">
  </div>
  
  <div class="form-row">
    <label for="lname">Last name:</label>
    <input type="text" name="lname" id="lname">
  </div>
  
  <div class="form-row">
    <label for="email">E-mail adress:</label>
    <input type="email" name="email" id="email">
  </div>
  
  <input type="submit">
</form>

Answer 3

在html中，div是一个阻塞元素。所以你实现的div似乎阻止了UI组件的定位。

在这种情况下，chrome会解释它，就像在渲染表单中的其他ui元素之后需要显示自动完成一样。 您可以尝试将该div更改为跨度，并查看是否更改了渲染。

这在您的案例中显示为Chrome自己的解释行为。您无法更改Chrome的渲染行为，但您可以在表单中关闭自动填充功能，而是通过https://jqueryui.com/autocomplete/启用自己的自动填充列表

另外，请阅读此内容，您正在使用或引用的chrome版本有一些重大更改。当前版本是60.0.3112.90。对于网络浏览器，您已经知道，最新版本更好。

https://github.com/jmoenig/Snap--Build-Your-Own-Blocks/issues/1707

Answer 4

我将删除高度为150px的div，我将为输入名称添加标签，试试这个

    <form action="/action_page.php" autocomplete="on">
      <label for="fname">First name:</label><input type="text" name="fname"><br>
      <label for="lname">Last name:</label><input type="text" name="lname"><br>
      <label for="email"> E-mail: </label><input type="email" name="email" ><br>
       <input type="submit">  
    </form>