Отключить автозаполнение input

Общая идея в том, чтобы когда мы указываем в атрибутах инпута кукую-то пренадлежность к известному полю ввода, например name='email', или placeholder='E-mail', то браузер старается сэкономить время пользователя и заполнить его ранее введеными данными. Но бывает, что от этой фишки нужно избавиться, и это бывает трудно.

К сожалению нет единой и точной инструкции для того чтобы отключить автозаполнение в формах. Такое впечатление, что браузеры наоборот пытаются обойти все возможные ухищрения и игнорируют потребность разработчика в необходимости отключения автозаполнения:\

В этой заметке я собрал те рекомендации, которые так или иначе были полезны.

  1. Атрибут autocomplete для input
    • autocomplete="off" — Не работает в хроме, но работает в некоторых других браузерах, но не в FireFox.
    • autocomplete="disabled" — Работает в хроме
    • autocomplete="someRandomString" — Любая случайная строка. Работает в хроме на момент написания заметки

    Также, добавить autocomplete="off" к тегу form

  2. jQuery Плагин disableAutoFill
    Вроде работает
  3. Эффективно и изящно как топор
    Для себя я использую чудовищный подход, при котором меняю до неузноваемости поле name, пишу ахинею в autocomplete и это работает...
    Пример:

    <input type="text" name="email" autocomplete="h87h58g7h8hd">
    <input type="text" name="e-m-a-i-l" placeholder="email" autocomplete="h87h58g7h8hd">
    <input type="text" name="e-m-a-i-l" autocomplete="iuhaiofy">
    <input type="text" name="jhygyvfvy" autocomplete="syudht97g">

Комментарии (5)

  1. Александр 19 февраля 2020, 21:04 # 0
    ужас какой)
    1. Александр 04 августа 2020, 20:34 # 0
      По идее можно просто генерировать name поля, например, email345983 и автозаполнения не будет)) но это я так говнокодирование сказал))
      1. Евгений 17 марта 2021, 17:05 # 0
        <input type="text" name="email" readonly onfocus="this.removeAttribute('readonly')">
        1. Али 03 мая 2024, 10:25 # 0
          Не работает так
        2. asdasdsad 27 июня 2022, 12:55 # 0
          asdasd
          *Комментарий будет опубликован после проверки модератором

          Похожие статьи

          jQuery.Maskedinput js - документация на русском с примерами

          Маска для ввода телефона +7(___)___-__-__

          Отключить автозаполнение input

          Настройка Webpack - несколько точек входа и разделение на чанки

          Универсальная форма обратной связи — feedBackForm

          Слайдер Slick slider в контенте ресурса

          Как сделать переменную не реактивной в Vue

          Bxslider отображение картинок после полной загрузки слайдера

          Как обработать POST данные в PHP

          Примеры использования Vuex

          Выполнить код после асинхронного запроса axios во Vue

          Как вызвать метод из другого компонента Vue

          Заготовки JavaScript

          Рекурсивно вложенный компонент Vue

          Связать значения инпутов через jQuery (биндинг)

          Настроить Axios чтобы принимал только JSON

          Использование async/await в JavaScript с Vue.js

          Js-beautify - библиотека для форматирования HTML, CSS, JS

          Использование Promise.all с примерами на VueJs

          Создание цикла асинхронных вызовов во Vue.js

          Манипуляция с HTML во Vue.js и cash-dom

          Наш сайт использует куки, нажмите «ОК» если вы не против
          OK