Блог

Как отключить автозаполнение поля в HTML

27 января 2016 Рубрики: Вёрстка.

В HTML5 появился атрибут autocomplete="on|off", который можно прописать к отдельному полю или ко всей форме в целом. Он позволяет отключить автозаполнение поля и всей формы соответственно. Всё бы ничего, да вот мной было замечена одна вещь. Если пользователь вашего сайта воспользуется функцией браузера «запомнить пароль», то ваш «надежный» autocomplete="off" перестанет работать. Я лично заметил такое поведение во всеми любимом Хроме. В остальных браузерах не проверял. Мало того, Хром может вставлять запомненные значения в неправильные поля! Насколько я понимаю, он ориентируется по атрибуту type="password". Но могу ошибаться, конечно. В общем…

Решение

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

Обратите внимание на два атрибута: readonly и onfocus. Вся суть в том, что мы сначала запрещаем редактирование поля, а по фокусу разрешаем. Таким образом, у пользователя не возникнет проблем при использовании такого поля, и в то же время оно не будет заполняться ненужными данными.