Chrome - Вы хотите сохранить этот пароль? получить неверное значение

У меня есть форма, которая позволяет пользователям запрашивать учетную запись на частном веб-сайте, но нет поля пользователя. Вместо этого спецификации для этого проекта требуют, чтобы пользователь вводил свой адрес электронной почты и пароль/подтверждал пароль. Также есть поля для ввода пользователем своего государства и страны.

Когда форма отправлена, Chrome отображает приглашение, запрашивающее у пользователя сохранение пароля, но оно отображает значение поля состояния вместо поля адреса электронной почты. (Адрес электронной почты является фактическим именем пользователя учетной записи).

Я понимаю, что Chrome будет перемещаться по полям формы до тех пор, пока не найдет поле с идентификатором id = password, после чего он пойдет по полю, чтобы найти id = имя пользователя. Поскольку у меня нет поля id = username и Chrome не относится к id = email, он, похоже, использует поле непосредственно перед полем id = password для имени пользователя.

Как заставить Chrome использовать поле с id = email для имени пользователя?

<form action="POST" src="#">
    <input id="email" type="text" />
    <input id="state" type="text" />
    <input id="country" type="text" />
    <input id="password" type="password" />
    <input id="confirmpassword" type="password" />

    <input type="submit" value="Request Account" />
</form>

При отправке вышеуказанная форма запускает запрос Chrome:

Would you like to save this password?

Iowa             ********

Обратите внимание, что "Iowa" - это любое значение, введенное в поле id = state, что, конечно, неверно.

В этот момент было бы сложно изменить id = email на id = username. Есть ли альтернативный способ сделать это и сохранить id = email?

Ответы

Ответ 1

Кажется, существует только одно решение этой проблемы. Переименование id="email" до id="username" также не решает проблему. Кажется, что это не имеет значения для идентификатора или метки, браузеры используют поле непосредственно перед полем id="password" в качестве имени пользователя, поэтому я переместил два поля вместе, например:

<form action="POST" src="#">
    <input id="state" type="text" />
    <input id="country" type="text" />
    <input id="email" type="text" />
    <input id="password" type="password" />
    <input id="confirmpassword" type="password" />

    <input type="submit" value="Request Account" />
</form>

Если кто-нибудь знает, как я могу указать поле, используемое как username, в подсказке сохранения пароля браузера (независимо от позиционирования поля формы), я был бы признателен за указатель!

Ответ 2

У меня была та же проблема. Исправлено помещение скрытого поля (с дисплеем: нет) перед паролем и загрузка его с реальным значением поля входа:

<input type="text" name="user.loginId" id="new-loginId" tabindex="1" class="form-control" placeholder="Nome de usuário" value="${user.loginId}">
<input type="text" name="user.name" id="new-name" tabindex="2" class="form-control" placeholder="Nome completo" value="${user.name}">
<input type="text" id="browser-friendly-login-field-location" value="${user.loginId}" style="display:none"/>
<input type="password" name="user.password" id="new-password" tabindex="3" class="form-control" placeholder="Senha" oninput="checkPasswords(false);" onkeydown="checkPasswords(false);" onchange="checkPasswords(false);">
<input type="submit" onclick="$('#browser-friendly-login-field-location').val($('#new-loginId').val());"/>

Ответ 3

Решение Guilherme display: none не работало для меня, поэтому я применил следующий класс CSS в дополнительном поле входа:

.Login--hidden {
  height: 1px;
  position: absolute;  
  top: -1px;
  left: 0;
  width: 1px;
}

Мне также пришлось добавить элемент tabindex="-1" к элементу, чтобы вынуть его из потока табуляции.

Все еще не идеально.

Ответ 4

Я работаю над той же проблемой здесь. Сконфигурировано (прочитано где-то еще и протестировано), что только в chrome и в chrome вы можете установить autocomplete="username" в поле электронной почты. И это позволит браузеру узнать, какое поле имени пользователя является правильным. Однако это работает только для Chrome, поэтому я не использую это решение

Документация: