Отключение предложений ввода в полях HTML-форм: как сделать

Быстрый ответ

Если ваше время ограничено, предлагаю следующий подход: воспользуйтесь атрибутом autocomplete="off" в HTML-теге для отключения предложений автозаполнения:

<input type="text" autocomplete="off">

А для большего уровня защиты от автозаполнения в текущих версиях браузеров, рекомендуется использование autocomplete="new-password" в полях для ввода пароля:

<input type="password" autocomplete="new-password">

Autocomplete: воля браузера

Справиться с автозаполнением – не простая задача, ведь браузера могут проигнорировать попытки его отключить. Обсудим несколько подходов, которые помогут в этом деле.

Атрибут "autocomplete=off"

Атрибут autocomplete="off" может стать вашим первым шагом в борьбе с автозаполнением. Но стоит учесть, что некоторые браузеры могут обходить его при заполнении логина и пароля, стремясь улучшить пользовательский опыт.

Подробнее об этом расскажет наш спикер на видео

"autocomplete=new-password"

Этот атрибут сообщает браузерам о том, что перед ними новое поле для пароля, что поможет избежать его автозаполнения. Браузеры, основанные на движке Chromium, Safari и последние версии Firefox поддерживают этот метод.

Помощь JavaScript

Если использование HTML вам не помогло, придется воспользоваться JavaScript. Вы можете программно изменить атрибут или очистить поля с помощью обработчиков событий:

document.getElementById('myInput').addEventListener('focus', function() {
    this.setAttribute('autocomplete', 'off');
    this.value = '';
});

Игра в "подмену" для поля поиска

Если присвоить полю type="search", это также может избавить от нежелательного автозаполнения. Однако это может изменить поведение клавиатуры на мобильных устройствах и добавить кнопку для очистки поля.

React и автокомплит

В React ситуация аналогична обычному HTML, только для JSX требуется использовать autoComplete в верблюжьем регистре:

<input
  type="text"
  name="user"
  autoComplete="off"
  value={this.state.value}
  onChange={this.handleChange}
/>

Autocomplete: история запутывается…

"Фишки" браузера

Использование autocomplete="new-password" для важных полей также может подсказать браузерам предложить дополнительные инструменты, например, генерацию паролей.

"Readonly" как хитрость

Атрибут readonly может защитить поля от автозаполнения до момента их активации, после чего его можно деактивировать с помощью JavaScript:

<input type="text" name="user" readonly onfocus="this.removeAttribute('readonly');">

Ответственное использование

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

Визуализация

Попробуйте изобразить работу механизма автозаполнения и его отключения с помощью наглядной метафоры:

До применения autocomplete="off":
- Форма HTML: "Желаете что-то рассказать?"
- Ввод данных: [__🔍__]

После применения autocomplete="off":
- Форма HTML: "Теперь вы молчаливы!"
- Ввод данных: [________]

Атрибут autocomplete="off" умеет скрывать самые сокровенные тайны от памяти браузера.

Искусство маскировки: "шпионский" подход

При использовании autocomplete="off" рекомендуется следующее:

Тестирование по платформам

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

Информационный мониторинг

Следите за обновлениями в MDN Web Docs и обсуждениями в Chromium Bugs, чтобы быть в курсе последних изменений поведения автозаполнения.

Полезные материалы: разведданные

1. MDN Web Docs – Атрибут Autocomplete.
2. HTML Стандарт.
3. Обсуждение на Stack Overflow.
4. w3schools: Учебник Autocomplete.
5. Поддержка браузерами.