У меня есть простая HTML-форма, я использую «автозаполнение Google» в поле, которое автоматически заполняет данные в двух полях.

Проблема в том, что автозаполнение адреса браузера перекрывает автозаполнение Google.

Как отключить автозаполнение браузером полей в каждом браузере?

Не стесняйтесь делиться мыслями по этому поводу. Спасибо.

Вот универсальное решение, которое будет работать во всех браузерах с мая 2021 года!

TL; DR

Переименуйте имена полей ввода и идентификаторы полей во что-то не связанное, например 'data_input_field_1' . Затем добавьте amp;#8204; символ в середину ваших меток. Это непечатаемый символ, поэтому вы его не увидите, но он обманывает браузер, заставляя его не распознавать поле как поле, требующее автозаполнения, поэтому встроенный виджет автозаполнения не отображается!

Подробности

Почти все браузеры используют комбинацию имени поля, идентификатора, заполнителя и метки, чтобы определить, принадлежит ли поле к группе адресных полей, которым может быть полезно автоматическое заполнение. Поэтому, если у вас есть поле, подобное <input type="text" id="address" name="street_address"> практически всем браузерам, оно будет интерпретироваться как поле адреса. Таким образом, браузер отобразит встроенный виджет автозаполнения. Мечтой было бы, чтобы использование атрибута autocomplete="off" работало, к сожалению, большинство браузеров в настоящее время не выполняют запрос.

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

Начните с переименования атрибутов id и name на что-то, что не выдаст, что вы имеете дело с данными, связанными с адресом. Поэтому вместо использования <input type="text" id="city-input" name="city"> используйте что-то вроде этого <input type="text" id="input-field-3" name="data_input_field_3"> . Браузер не знает, что представляет data_input_field_3 . Но вы делаете.

Если возможно, не используйте текст-заполнитель, поскольку большинство браузеров также учитывают это. Если вам нужно использовать текст-заполнитель, вам придется проявить творческий подход и убедиться, что вы не используете какие-либо слова, относящиеся к самому параметру адреса (например City ). Использование чего-то подобного Enter location может помочь.

Последним параметром является метка, прикрепленная к полю. Однако, если вы похожи на меня, вы, вероятно, захотите сохранить метку без изменений и отображать узнаваемые поля для своих пользователей, такие как «Адрес», «Город», «Штат», «Страна». Что ж, отличная новость: ВЫ МОЖЕТЕ! Лучший способ добиться этого — вставить символ нулевой ширины, не являющийся объединителем amp;#8204; , в качестве второго символа в метке. Поэтому замена <label>City</label> на <label>Camp;#8204;ity</label> . Это непечатаемый символ, поэтому ваши пользователи будут видеть City , но браузер будет обманут, увидев C ity и не распознав поле!

Миссия выполнена! Если все прошло хорошо, браузер больше не должен отображать встроенный виджет автоматического заполнения адреса в этих полях!

Надеюсь, это поможет вам в ваших начинаниях!

Это не так просто реализовать в кроссбраузерном режиме.

Многие браузеры, в частности Google Chrome, очень настаивали на том, чтобы иметь инструмент, который помогает пользователям автоматически заполнять свои формы, но для разработчиков это было просто болезненно.

Я мог бы перечислить множество различных способов, которые могут или не могут работать в зависимости от разных факторов, но я опубликую это единственное решение, которое, наконец, сработает. Итак, если вы искали этот ответ по всему Интернету, оставьте мне комментарий ниже и скажите, сработало ли это.

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

 autocorrect="off" spellcheck="false" autocomplete="off"
  

Предполагается, что этого достаточно, НО ЭТО НЕ ТАК! и мы все это знаем. итак, следующее, что нужно сделать, это добавить немного JS на случай, если браузеру удалось проигнорировать эти атрибуты. Для этого примера я просто использую jQuery и предполагаю, что здесь мы имеем дело с входными данными, но вы можете выбрать любой селектор, который вы хотите.

 $('form').attr('autocomplete', 'off');
$('input').attr('autocomplete', 'off');
  

Наконец, это будет работать в 50% случаев, но если браузер ранее обнаружил, что эта форма была заполнена в прошлом, он может проигнорировать это, поэтому давайте добавим последний шаг.

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

Честно говоря, именно этот последний шаг заставляет все работать, но, как я уже сказал, лучше, если наши атрибуты будут готовы к будущей совместимости. Имейте в виду, что браузер никогда не будет пытаться автозаполнять ввод только для чтения, поэтому для этого последнего шага нам нужно сделать его доступным только для чтения, а при фокусировке вернуть его в нормальное состояние, поэтому добавьте следующий JS в атрибут onfocus:

 readonly onfocus="this.removeAttribute('readonly');"
  

БИНГО! теперь это должно сработать.

Итак, окончательный ввод выглядит так:

 <input type="text" name="email" required autocorrect="off" spellcheck="false" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');" />
<script>
$('input').attr('autocomplete', 'off');
</script>
  

Кажется, что это много, но это работает в 100% случаев. как я уже сказал, вероятно, с onfocus=»this.removeAttribute только для чтения(‘только для чтения’); достаточно, но совместимость с браузером меняется, и в конечном итоге все будет работать должным образом, так что хорошо иметь его там.

Если это сработало (или не сработало), оставьте комментарий! Спасибо