滚动上错误的输入自动完成位置（镀铬） [英] Wrong input autocompletion position on scroll (chrome)

问题描述

我对输入文本的默认自动完成有一些麻烦。滚动时它不会随意移动。我希望自动完成文本保持在输入的正下方。有没有办法做到这一点？这发生在我的Chrome浏览器Versión57.0.2987.133

小提琴

 < form action =/ action_page.phpautocomplete =on> 
名字：< input type =textname =fname>< br> 
姓氏：< input type =textname =lname>< br> 
电子邮件：< input type =emailname =email>< br> 
< input type =submit> 
< div style =height：150px> 
< / div> 
< / form> 
  

解决方案

这些自动完成工具提示是Google Chrome的原生实施方式，可以像在其他浏览器上一样，不会使用css / js进行更改。这个事实为您解决问题提供了两种可能：

清理标记。语义和干净 html 表单的标记对于防错非常重要。否则，如果用户习惯使用浏览器的默认自动完成功能，那么给用户提供一个很好的解决方案。除了这个自动完成脚本不适用于名称或姓氏，更像是从列表中搜索/选择项目。一个干净，安全的表单标记可能看起来像这样 jsfiddle ：

实现自动完成JavaScript插件。您可以通过添加许多脚本来为用户提供更好的体验，方法是在文档中添加秘密信息。但是，因为我很伤心它不常用这些名字。

form {背景：#eee; border：1px solid #ddd;填充：10px; max-width：250px;}。form-row {margin-bottom：10px;} label {display：block; margin-bottom：4px;} input [type =text]，input [type =email] {padding：8px;宽度：100％; box-sizing：border-box;}

< form action =/ action_page.phpautocomplete =on> < div class =form-row> <！ - 输入顶部的标签可以提高可用性 - > < label for =fname>名字：< / label> < input type =textname =fnameid =fname> < / DIV> < div class =form-row> < label for =lname>姓氏：< / label> < input type =textname =lnameid =lname> < / DIV> < div class =form-row> < label for =email>电子邮件地址：< / label> < input type =emailname =emailid =email> < / DIV> < input type =submit>< / form>

I'm having some troubles with the default autocompletion of an input text. It does not move acordingly when scrolling. I would like that the autocomplete text stays right below the input. Is there a way to accomplish this?. This happens to me in Chrome browser Versión 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>

解决方案

Those autocomplete tooltips are an native implementation from Google Chrome and can, like on other browsers, not changed with css/js. This fact gives you two possibilities to solve your problem:

Clean up your markup. Semantic and clean html markup for forms is essential for error-resistance. Else it is a good solution to give users the chance to use the browser default autocompletion if they are used to it. Besides this autocomplete scripts are not meant to work for fornames or lastnames, more like for search / choosing an item from a list. A clean and mostly safe form markup could look like this jsfiddle:

Implement an autocomplete javascript plugin. There are a lot of script you can implement to give users a better experience by adding nessecary informations in documents. But as I sad its not common to use those for names.

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>

这篇关于滚动上错误的输入自动完成位置（镀铬）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！