Google Chrome: после очистки input'ы продолжают сохранять признак полей, где значения были выбраны, а не введены

#javascript #html #jquery #css #google_chrome

Ситуация такая. Есть форма, на ней есть несколько полей, значения которых пользователь
может выбрать из ранее введенных. Типичная ситуация, все браузеры такое позволяют.
Однако, в Google Chrome происходит странная ситуация: после того, как форма обрабатывается
скриптом и поля очищаются, у них все равно остается признак полей, которые были ранее
заполнены каким-то выбранным, а не введенным значением, проще говоря - сохраняют желтый
фон. Ниже поясняющая раскадровка.

Только зашли на страницу:



Заполнили поля:



Отправили:



Подскажите, как это исправить?`
    

Ответы

Ответ 1

После отправки формы нужно ее сбросить методом .reset(), тогда желтый фон уберется.



document.querySelector('b').onclick = function() {
  
  // ваш код по обработке формы
  
  document.querySelector('form').reset();
}
b {
  cursor: pointer;
}

  
  
  
  submit



Ответ 2

Оставлю ответ и сам. На мой взгляд, это лучше вынести из комментариев, так как информация
важная. В результате общения выяснилось, что по сути нам нужно перебить значение, которое
выставляет сам Chrome, а именно:

input:-webkit-autofill {background-color: rgb(250, 255, 189);}


В случае, если это был бы обычный css, мы бы просто сделали примерно так (взял у
пользователя из другого ответа):

input:-webkit-autofill {
    box-shadow: inset 0 0 0 1000px #fff !important; /* Цвет фона */
    -webkit-text-fill-color: #999 !important; /* цвет текста */
    color: #999 !important; /* цвет текста */
}


Но задача стояла сделать это динамически. При этом по умолчанию .css() не работает
с important:


  Note: .css() ignores !important declarations. So, the statement $( "p"
  ).css( "color", "red !important" ) does not turn the color of all
  paragraphs in the page to red. It's strongly advised to use classes
  instead; otherwise use a jQuery plugin.


Выход был найден тут:

js:
$('#contact_us').find('input:-webkit-autofill').addClass('importantBackground');

css:
.importantBackground {
    background-color: #BA383D!important;
  }
}


Но в итоге ситуация стала явно похожа либо на баг в браузере, либо на попытку разработчиков
браузера быть самыми умными. Не смотря на то, что в инспекторе мы видим вот это:



Фон все равно оставался желтым. Было испробовано и второе решение, которое предложил
другой пользователь — отключить autofill после очистки формы и включать по получению
полями фокуса на них.

$('#contact_us').find('input, textarea').attr('autocomplete', 'off');


Но и оно не помогло:



В итоге ответ был найден. Нужно использовать чистый js и на форме вызывать метод reset().


Ответ 3

Думаю стоит после отправки формы таки выставить аттрибут autocomplete="off". 

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



w3.org


  The autocompletion mechanism must be implemented by the user agent
  acting as if the user had modified the element's value, and must be
  done at a time where the element is mutable (e.g. just after the
  element has been inserted into the document, or when the user agent
  stops parsing).


Другими словами, если при отправке формы страница не обновляется - придётся перегенерить
форму заново.


Ответ 4

Вариант 1

Параметр autocomplete="off" на input.

Вариант 2

:-webkit-autofill {
    box-shadow: inset 0 0 0 1000px #fff !important; /* Цвет фона */
    -webkit-text-fill-color: #999 !important; /* цвет текста */
    color: #999 !important; /* цвет текста */
}