Недавно работала с одним проектом, где в admin части было достаточно много форм для заполнения. В одной из форм большой помехой был autocomplete. Проблема состояла в том, что при выборе имени или Email браузер автоматически заполнял и адрес. А механизм выбора адреса там был реализован несколько по-другому (при выборе страны при помощи ajax подтягиваются названия штатов в следующее поле, а далее при выборе штата – город). В общем autocomplete здесь всё очень портил.

Выяснилось, что простым autocomplete=”off” здесь не справиться.

Тогда методом проб и поисков было найдено решение, которым я сегодня с вами поделюсь.

Отключаем autocomplete у полей формы

Вы можете хотеть отключить autocomplete как у всех полей формы, так и у некоторых.

Смысл способа состоит в том, что на необходимый элемент формы (у которого мы хотим отключить autocomplete) мы вешаем атрибут readonly. За счет этого элемент формы автоматически не будет заполняться.

Однако нам всё же нужно, чтобы пользователь смог заполнить данный элемент. Для этого на этот элемент нужно повесить событие onfocus. Когда будет происходить событие фокуса, то мы будем удалять атрибут readonly.

Код всего вышеизложенного может выглядеть примерно так:

<form>
  <label for="name">Name</label>
  <input class="form-control" type="text" readonly onfocus="this.removeAttribute('readonly')" autocomplete="off" name="name"><br>
  <label for="email">Email</label>
  <input class="form-control" type="email" readonly onfocus="this.removeAttribute('readonly')" autocomplete="off" name="email"><br>
  <label for="country">Country</label>
  <select class="form-control" readonly onfocus="this.removeAttribute('readonly')" autocomplete="off" name="country">
    <option disabled selected>Select a country...</option>
    <option value="rus">Russia</option>
    <option value="mex">Mexico</option>
  </select>
</form>

Можете протестировать код ниже, с помощью CodePen.

На момент написания статьи данный способ вполне хорошо работает.

Буду рада вашим комментариям.