3

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

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

введите сюда описание изображения

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

введите сюда описание изображения

Отправили:

введите сюда описание изображения

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

12
  • Вы не код очищаюй поля приведите, а весь код этой странички. HTML, css, js.
    – Moonvvell
    Commented 16 февр. 2017 в 10:06
  • 1
    пробуйте менять еще стили webkit, смотрите тут usabili.ru/news/2010/01/13/input-in-chrome.html?comment_added=1 и тут bugs.chromium.org/p/chromium/issues/detail?id=46543 и наверное после удаления значения нужно еще переопределить стили
    – Oleksandr
    Commented 16 февр. 2017 в 10:25
  • @Oleksandr, отлично, только не совсем понятно, как с помощью jquery такое реализовать, в смысле как отобрать элемент по такому селектору. Я по всякому попробовал - не выходит. Может вынесете ваш комментарий в ответ и попробуете там написать код? Там и обсудить можно будет. Commented 16 февр. 2017 в 10:38
  • @Moonvvell, самый обычный код, строка из js приведена в посте, код html формы сейчас добавлю в вопрос Commented 16 февр. 2017 в 10:39
  • 1
    @SashaOmelchenko, это совершенно не стандартное поведение браузера, так как стандартно после очищения полей они становится обратно с тем фоном, с каким и были. Ровно то же хочу сделать и я - после того, как поля очистились, они должны стать как прежде Commented 16 февр. 2017 в 11:14

4 ответа 4

7

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

document.querySelector('b').onclick = function() {
  
  // ваш код по обработке формы
  
  document.querySelector('form').reset();
}
b {
  cursor: pointer;
}
<form name="ololo">
  <input type=text name=name>
  <input type=text name=phone>
  <input type=text name=address>
  <b>submit</b>
</form>

8
  • О! То, что нужно. Commented 16 февр. 2017 в 11:46
  • Тогда не стесняйтесь принимать ответ ) Commented 16 февр. 2017 в 11:47
  • да-да, я просто свою телегу сначала дописал ) Спасибо! Commented 16 февр. 2017 в 11:48
  • Изобретаете велосипед. Commented 16 февр. 2017 в 12:09
  • 2
    вы всегда можете предоставить свой, невелосипедный вариант. пока что ваш вариант полностью переопределяет дефолтное поведение браузера, что как раз и есть велосипед. Commented 16 февр. 2017 в 12:32
4

Оставлю ответ и сам. На мой взгляд, это лучше вынести из комментариев, так как информация важная. В результате общения выяснилось, что по сути нам нужно перебить значение, которое выставляет сам 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().

5
  • 1
    можете и не на ваниле вызывать:$(this)[0].reset(); или $(this).trigger( 'reset' )
    – Oleksandr
    Commented 16 февр. 2017 в 11:57
  • Изобретаете велосипед. Commented 16 февр. 2017 в 12:09
  • @Vadizar ну я так, задокументировал что описывали, а вообще верный ответ я уже отметил. Commented 16 февр. 2017 в 12:15
  • @Станислав ну это бред, когда есть вариант на CSS. В чем проблема адаптировать стили под ваш дизайн и использовать его? Commented 16 февр. 2017 в 12:22
  • @Vadizar жажда познания :) Commented 16 февр. 2017 в 12:23
2

Думаю стоит после отправки формы таки выставить аттрибут 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
  • Если данные отправляются аяксом, то установка этого атрибута после отправки формы и очистки полей не решит проблему. Commented 16 февр. 2017 в 11:38
  • Изобретаете велосипед. Commented 16 февр. 2017 в 12:09
  • @SashaOmelchenko, я почему-то сразу подумал, что именно .reset не работает, баг типа такой. А заново сгенерированная форма с отключенным автокомплитом должна сработать.
    – vp_arth
    Commented 16 февр. 2017 в 12:23
  • @vp_arth да, заново сгерененная абсолютно, но она и так будет какой нужно, без reset() - а про него, если честно, я вообще забыл. Commented 16 февр. 2017 в 18:52
1

Вариант 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; /* цвет текста */
}
11
  • 1
    Абсолютно не решит, зачем я пользователей буду лишать этой возможности, да еще и на таком критичном участке, где нужна конверсия побольше - заставлять их набирать руками данные поля - серьезный урон по бизнесу чьему-то. Commented 16 февр. 2017 в 11:01
  • @Станислав тогда наслаждайтесь желтым полем. Commented 16 февр. 2017 в 11:01
  • Спасибо, но нет :) Commented 16 февр. 2017 в 11:02
  • @Станислав прикрепил второй вариант Commented 16 февр. 2017 в 11:03
  • 1
    Единственное нормальное решение - это .reset(). Пользователь, привыкший к автозаполнению(и к жёлтому цвету) вам спасибо не скажет ни за первый, ни за второй вариант
    – vp_arth
    Commented 16 февр. 2017 в 12:21

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.