滚动(铬)上输入自动完成位置错误

Question

我在输入文本的默认自动完成方面遇到了一些麻烦.滚动时它不会相应移动.我希望自动完成文本保持在输入下方.有没有办法实现这个目标？我在Chrome浏览器Versión57.0.2987.133中遇到这种情况

小提琴

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