Неверное входное положение автозаполнения на прокрутке (хром)

Ответ 1

Эти всплывающие подсказки автозаполнения являются встроенной версией из Google Chrome и могут, как и в других браузерах, не изменяться с помощью css/js. Этот факт дает вам две возможности для решения вашей проблемы:

Очистить разметку. Семантическая и чистая разметка html для форм необходима для устойчивости к ошибкам. Иначе это хорошее решение, чтобы дать пользователям возможность использовать автозаполнение по умолчанию для браузера, если они к нему привыкли. Кроме того, сценарии автозаполнения не предназначены для работы с именами или именами, более похожими на поиск/выбор элемента из списка. Чистая и в основном безопасная форма разметки может выглядеть так: jsfiddle:

Реализовать плагин javascript для автозаполнения. Существует множество script, которые вы можете реализовать, чтобы дать пользователям лучший опыт, добавив в документацию неописуемую информацию. Но, как я сожалею, его нередко использовать для имен.

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>

Ответ 2

Браузер не дает вам доступ к всплывающей подсказке автозаполнения, поэтому вы можете прокручивать его с помощью контейнера-контейнера. Поведение по умолчанию заключается в удалении всплывающей подсказки при прокрутке 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>

Ответ 3

Я удалю div с высотой 150 пикселей, и я добавлю метку для имен ввода, попробуйте это

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

Ответ 4

В html div является блокирующим элементом. Таким образом, div, который вы реализовали, по-видимому, блокирует позиционирование компонентов пользовательского интерфейса.

В этом случае хром интерпретирует его так, как будто ему нужно будет отобразить автозаполнение после того, как будут отображены другие элементы ui внутри формы. Вы можете попробовать изменить этот div на диапазон и посмотреть, изменит ли это рендеринг.

В вашем случае это выглядит как хромированное собственное интерпретируемое поведение. Вы не сможете изменить поведение рендеринга хрома, но вы можете отключить автозаполнение в своей форме и вместо этого включить свой собственный список автозаполнения через https://jqueryui.com/автозаполнение/

Кроме того, прочтите это, версия хром, который вы используете или ссылаетесь на него, имела некоторые нарушения. Текущая версия - 60.0.3112.90. С веб-браузерами, как вы уже знаете, самая новая версия лучше.

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