Срабатывание автозаполнения полей на других формах в Chrome и Safari

Question

[Руслан Шашков]

Привет всем! Может кто сталкивался, такая проблема, есть две формы на разных страницах, на сайте, авторизация и регистрация.

Форма авторизации:

form#login(action="/login", method="post")
    input#login_username(type="text", name="login_username", placeholder="Username")
    input#login_password(type="password", name="login_username", placeholder="Password")

Форма регистрации:

form#register(action="/sign-up", method="post")
    input#sign_up_email(type="email", name="sign_up_email", placeholder="E-mail")
    input#sign_up_username(type="text", name="sign_up_username", placeholder="Username")
    input#sign_up_password(type="password", name="sign_up_password", placeholder="Password")

Так вот, при авторизации браузер спрашивает, сохранить ли пароль? Если ему разрешить и после авторизации попробовать открыть форму регистрации, то она будет заполнена теми же данными, но мне это не нужно. Причем autocomplete="off" не помогает. Как он распознает поля? Имена и ID разные у всех полей. Не помогает изменение порядка полей и даже удаление поля "username" (в этом случае он заполняет "email" вместо "username".

Какой-то хаос. Неужели нет метода как-то этим управлять?

Answer 1

[thror )))]

Нет. Пусть сохраняет. Бесполезно с этим возиться.

Comments

[Руслан Шашков]

Хром, ты (я про аватар)? :-) PS: Я тоже так решил.

[dinalka]

Конечно, бесполезно, в итоге потом пользователи мучаются, молодцы программисты

Answer 2

[Илья Смуров]

Случайно напоролся на ваш вопрос, когда сам искал на него ответ.
Решение простое :)

<form autocomplete="off">
   <input name="name" type="text">
   <input name="password" type="password" autocomplete="new-password"> // autocomplete="new-password" это решение для хрома
</form>

Comments

[Сергей]

этот вариант решения помог. Спасибо.

Answer 3

[Павел Иванников]

Нашел решение которое работает. Добавьте в форму скрытое поле password.

<input type="password" 
       autocomplete="off" 
       name="passwordFake" 
       style="position:absolute; opacity: 0; filter: alpha(opacity = 0);"/>

В чем суть проблемы - Safari для автокомплита детектит поля input[type=password] и от них играет. Чтобы его запутать, можно добавить скрытое поле и тогда будет заполняться оно. К сожалению, добавлять такой фикс прийдется во все формы, где хочешь избежать автокомплита.

Answer 4

[dark-grey]

как то тоже нужно было отрубить браузеру автозаполнение, при чем все танцы с autocomplete не давали никакого результата - браузер все равно усердно заполнял поля логином и паролем

помогло только прописать инпуту readonly свойство и удалять его при наведении мышью, в этом случае пользователь не заметит отличий

<input name="password" type="password" readonly onmouseover="this.removeAttribute('readonly')">

вариант с autocomplete="new-password" похоже тоже должен работать, правда возможно не во всех браузерах
https://developer.mozilla.org/en-US/docs/Web/Secur...

Answer 5

[maxaon]

А где у вас autocomplete="off"? Должно быть и на форме, и на элементах.

Comments

[Руслан Шашков]

Я его ставил, потом убрал. Дело в том, что мне все-таки нужен автокомплит - без него никуда. Но, чтобы он не трогал другие формы.

[Руслан Шашков]

Точнее, чтобы предлагал ввести e-mail и username, исходя из часто вводимых, как обычно, но чтобы логин и пароль заполнял только там, где нужно.

Answer 6

[maxaon]

Поменяйте идентификаторы и имена у полей/формы, поскольку сейчас у вас они аналогичные. Путь к формам тоже поменяйте. Меняйте на что-либо невразумительное.
А лучше не заморачивайте себе этим голову.

Answer 7

[webpauchara]

Проблема решена банальным добавлением скрытого текстового поля после нужного input. Если у нужного input есть класс, тот же класс добавить и скрытому.

<input type="text" style="display:none;">