Как остановить Chrome от пожелтения полей ввода моего сайта?

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

В Chrome (и для пользователей панели инструментов Google) функция автозаполнения меняет цвета моих форм ввода на желтый. Вот сложная проблема: я хочу, чтобы автозаполнение разрешалось в моих формах, так как оно ускоряет вход в систему пользователей. Я собираюсь проверить возможность отключить атрибут автозаполнения, если / когда произошла ошибка, но это сложный бит кодирования, чтобы программно отключить автозаполнение для одного затронутого входа на странице. Это, если быть проще, было бы главной головной болью.

Поэтому, чтобы попытаться избежать этой проблемы, существует ли более простой способ остановить Chrome от повторной раскраски полей ввода?

[править] Я пробовал следующее важное предложение ниже, и это не имело никакого эффекта. Я еще не проверил панель инструментов Google, чтобы убедиться, что для этого будет работать важный атрибут.

Насколько я могу судить, нет никаких средств, кроме использования атрибута autocomplete (который, похоже, работает).

13 Solutions collect form web for “Как остановить Chrome от пожелтения полей ввода моего сайта?”

Я знаю, что в Firefox вы можете использовать атрибут autocomplete = “off”, чтобы отключить функциональность автозаполнения. Если это работает в Chrome (не протестировано), вы можете установить этот атрибут при возникновении ошибки.

Это может использоваться как для одного элемента

 

… а также для всей формы

 

Установите для свойства схемы CSS значение none.

 input[type="text"], input[type="password"], textarea, select { outline: none; } 

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

 :focus { background-color: #fff; } 

это именно то, что вы ищете!

 // Just change "red" to any color input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px red inset; } 

Используя немного jQuery, вы можете удалить стиль Chrome, сохранив функциональность автозаполнения. Я написал короткую статью об этом здесь: http://www.benjaminmiles.com/2010/11/22/fixing-google-chromes-yellow-autocomplete-styles-with-jquery/

 if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) { $(window).load(function(){ $('input:-webkit-autofill').each(function(){ var text = $(this).val(); var name = $(this).attr('name'); $(this).after(this.outerHTML).remove(); $('input[name=' + name + ']').val(text); }); });} 

Чтобы удалить границу для всех полей, вы можете использовать следующее:

*:focus { outline:none; }

Чтобы удалить границу для полей выбора, просто примените этот class к полям ввода, которые вы хотите:

.nohighlight:focus { outline:none; }

Конечно, вы можете изменить границу, как вам хочется:

.changeborder:focus { outline:Blue Solid 4px; }

(От Билла Бекельмана: Переопределить автоматическую границу Chrome вокруг активных полей с помощью CSS )

Да, это будет серьезная головная боль, которая, на мой взгляд, не стоит возвращения. Возможно, вы немного изменили свою страtagsю пользовательского интерфейса, и вместо того, чтобы раскрасить красную рамку, вы можете покрасить границы красным цветом или поместить небольшую волокиту рядом с ней (например, ленту «Загрузка»), которая исчезает, когда поле находится в фокус.

Это кусок пирога с jQuery:

 if ($.browser.webkit) { $("input").attr('autocomplete','off'); } . if ($.browser.webkit) { $("input").attr('autocomplete','off'); } 

Или, если вы хотите быть немного более избирательным, добавьте имя classа для селектора.

На мой взгляд, проще:

  1. Получить http://www.quirksmode.org/js/detect.html
  2. Используйте этот код:

     if (BrowserDetect.browser == "Chrome") { jQuery('form').attr('autocomplete','off'); }; . if (BrowserDetect.browser == "Chrome") { jQuery('form').attr('autocomplete','off'); }; 

После применения @Benjamin его решения я узнал, что нажатие кнопки «Назад» все равно даст мне желтую подсветку.

Мое решение каким-то образом предотвратить появление этой желтой подсветки – это применить следующий jQuery jQuery:

  

Надеюсь, это поможет любому!

Это работает. Лучше всего, вы можете использовать значения rgba (с помощью rgba не работает ручка вставки в рамке-тени). Это небольшая подсказка от ответа Бенджамина. Я использую $ (document) .ready () вместо $ (window) .load (). Мне кажется, что мне лучше работать – сейчас гораздо меньше FOUC. Я не верю, что есть и недостатки использования $ (document) .ready ().

 if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) { $(document).ready(function() { $('input:-webkit-autofill').each(function(){ var text = $(this).val(); var name = $(this).attr('name'); $(this).after(this.outerHTML).remove(); $('input[name=' + name + ']').val(text); }); }); }; 

для сегодняшних версий, это тоже работает, если помещено в один из двух входных логинов. Также исправьте версию 40+ и позднюю версию Firefox.

  
 input:focus { outline:none; } 

Это отлично подойдет для меня, но, скорее всего, сохранит на вашем сайте единое целое, и вы захотите также включить его в свой CSS для текстовых областей:

 textarea:focus { outline:none; } 

Также это может показаться очевидным для большинства, но для новичков вы также можете установить цвет как таковой:

 input:focus { outline:#HEXCOD SOLID 2px ; } 

Если я правильно помню, важное правило в таблице стилей для цвета фона входов будет переопределять автозаполнение панели инструментов Google – по-видимому, то же самое относится и к Chrome.

  • Пользовательская проверка MVC: сравнить две даты
  • JSF не поддерживает проверку кросс-поля, есть ли обходной путь?
  • Фильтр аутентификации и сервлет для входа в систему
  • Проверка подлинности WinForm UI
  • maxlength атрибута текстового поля из DataAnnotations StringLength в Asp.Net MVC
  • Проверка даты с помощью проверки подлинности ASP.NET
  • HTML5: тип ввода номера, который принимает только целые числа?
  • Как работает SQL-инъекция из комикса XBCD Bobby Tables?
  • Проверка Xml с использованием схемы XSD
  • Проверка группы переключателей с использованием плагина проверки jQuery
  • Проверка верстки ViewModel для списка
  • Interesting Posts

    Что означает «выходить с кодом 9009» во время этой сборки?

    Папка «данные» Android-устройства «Монитор» пуста

    Могу ли я использовать подстановочные знаки в поиске Windows 8?

    Netbeans, как установить аргументы командной строки в Java

    Насколько серьезной является эта новая уязвимость безопасности ASP.NET и как ее можно обойти?

    Количество дней в конкретном месяце того же года?

    Отправка данных из TableView в DetailView Swift

    Как отключить сглаживание шрифтов только для gnome-terminal, но не для других приложений?

    Как получить TextBox, чтобы принимать только числовые данные в WPF?

    Метод / продукт для очистки сигаретного дыма от ЖК-дисплеев?

    Почему я не могу преобразовать ‘char **’ в ‘const char * const *’ в C?

    Разрешить пользователю вводить HTML в ASP.NET MVC – ValidateInput или AllowHtml

    Селекторы атрибутов CSS: правила кавычек (“,” или none?)

    Возникли проблемы с вложенным IF в пакетном файле

    Ленивое приглашение для кодовой фразы ssh с открытым ключом

    Давайте будем гением компьютера.