Как определить, автоматически ли браузер заполнил текстовое поле? Особенно с полями имени пользователя и пароля, которые заполняются автоматически при загрузке страницы.
Мой первый вопрос: когда это происходит в последовательности загрузки страницы? Это до или после document.ready?
Во-вторых, как я могу использовать логику, чтобы выяснить, произошло ли это? Не то чтобы я хотел, чтобы это не произошло, просто подключитесь к событию. Желательно что-то вроде этого:
if (autoFilled == true) {
} else {
}
Если возможно, я бы хотел, чтобы jsfiddle показал ваш ответ.
Возможные дубликаты
DOM событие для автозаполнения пароля браузера?
Запускаемые браузером события автозаполнения и Javascript
- Оба эти вопроса на самом деле не объясняют, какие события вызваны, они просто постоянно перепроверяют текстовое поле (не хорошо для производительности!).
источник
Ответы:
Проблема в том, что автозаполнение по-разному обрабатывается разными браузерами. Некоторые отправляют событие изменения, некоторые нет. Таким образом, почти невозможно подключить событие, которое запускается, когда браузер автоматически заполняет поле ввода.
Изменить триггер события для разных браузеров:
Для полей имени пользователя / пароля:
Для других полей формы:
Лучше всего либо отключить автозаполнение для формы, использующейся
autocomplete="off"
в вашей форме, либо опрашивать через регулярные промежутки времени, чтобы узнать, заполнена ли она.На ваш вопрос о том, заполнено ли оно в документе или перед документом. Уже снова оно варьируется от браузера к браузеру и даже от версии к версии. Для полей username / password только при выборе имени пользователя поле пароля будет заполнено. Так что в целом у вас будет очень грязный код, если вы попытаетесь присоединиться к какому-либо событию.
Вы можете прочитать это ЗДЕСЬ
источник
input
событии. Это то, что Chrome запускает при автозаполнении (и, возможно, также при автозаполнении, если у Chrome есть это; я всегда отключаю это).Решение для браузеров WebKit
Из документов MDN для псевдокласса: -webkit-autofill CSS:
Мы можем определить правило CSS void transition для желаемого
<input>
элемента, как только он будет:-webkit-autofill
отредактирован. JS сможет подключиться кanimationstart
событию.Кредиты команде Klarna UI . Смотрите их хорошую реализацию здесь:
источник
Это работает для меня в последних Firefox, Chrome и Edge:
источник
'input'
! Это было самое простое решение для меня, но я проверял только автозаполнение, а не автозаполнение.Для автозаполнения Google Chrome это работает для меня:
источник
На случай, если кто-то ищет решение (как и я сегодня) для прослушивания изменений автозаполнения браузера, вот собственный метод jquery, который я построил, просто чтобы упростить процесс при добавлении прослушивателя изменений к входу:
Вы можете назвать это так:
источник
Я много читал об этой проблеме и хотел найти очень быстрое решение, которое мне помогло.
где
inputBackgroundNormalState
для моего шаблона это «RGB (255, 255, 255)».Таким образом, в основном, когда браузеры применяют автозаполнение, они имеют тенденцию указывать, что ввод автоматически заполняется, применяя другой (раздражающий) желтый цвет к вводу.
Изменить: это работает для каждого браузера
источник
К сожалению, единственный надежный способ проверить этот кросс-браузер - опросить ввод. Чтобы сделать его отзывчивым, также слушайте события. Chrome начал скрывать значения автозаполнения от javascript, который требует взлома.
Добавить исправление для скрытых значений пароля автозаполнения Chrome.
источник
В github есть новый компонент polyfill для решения этой проблемы. Посмотрите на автозаполнение события . Просто нужно установить его и вуаля, автозаполнение работает как положено.
источник
Мое решение:
Прослушайте
change
события, как обычно, и при загрузке содержимого DOM сделайте следующее:Это вызовет события изменения для всех полей, которые не являются пустыми, прежде чем пользователь имел возможность их редактировать.
источник
Я также столкнулся с той же проблемой, когда label не обнаруживал автозаполнение и анимация перемещения метки при заполнении текста перекрывалась, и это решение работало для меня.
источник
Я искал похожую вещь. Только Chrome ... В моем случае div обертки должен был знать, было ли заполнено поле ввода. Так что я мог бы дать ему дополнительную CSS, как это делает Chrome в поле ввода, когда он заполняется автоматически. Посмотрев на все ответы выше, мое комбинированное решение было следующим:
HTML для этого будет
источник
Я знаю, что это старая тема, но я могу представить, что многие приходят сюда, чтобы найти решение этой проблемы.
Чтобы сделать это, вы можете проверить, имеет ли вход (ы) значение (я) с:
Я использую это для проверки значений в форме входа в систему, когда она загружена, чтобы включить кнопку отправки. Код сделан для jQuery, но его легко изменить при необходимости.
источник
($("#inputID:-webkit-autofill").val().length > 0) {
Это решение для браузеров с движком рендеринга webkit . Когда форма заполнена автоматически , входные данные получат псевдокласс : -webkit-autofill- (например, input: -webkit-autofill {...}). Так что это идентификатор, который вы должны проверить с помощью JavaScript.
Решение с некоторой формой теста:
И JavaScript:
Проблема при загрузке страницы - получить значение пароля, даже длину. Это потому, что безопасность браузера. Также тайм-аут , потому что браузер заполнит форму через некоторое время.
Этот код добавит класс auto_filled к заполненным входам. Кроме того, я попытался проверить значение пароля ввода или его длину, но это сработало сразу после того, как произошло какое-то событие на странице. Поэтому я попытался вызвать какое-то событие, но безуспешно. Пока это мое решение. Наслаждайтесь!
источник
У меня есть идеальное решение для этого вопроса, попробуйте этот фрагмент кода.
Демо здесь
источник
В chrome вы можете обнаружить поля автозаполнения, установив специальное правило css для автозаполненных элементов, а затем проверив с помощью javascript, применяется ли к элементу это правило.
Пример:
CSS
JavaScript
источник
Вот CSS-решение, взятое у команды Klarna UI. Смотрите их хорошую реализацию здесь ресурс
У меня отлично работает.
источник
Я использовал это решение для той же проблемы.
HTML-код должен измениться на это:
и код JQuery должен быть в
document.ready
:источник
Я использовал событие размытия в имени пользователя, чтобы проверить, заполнено ли поле pwd автоматически.
Это работает для IE и должно работать для всех других браузеров (я только проверял IE)
источник
blur
событие. Я применяю ту же функцию дляchange
иblur
события , и он работал большой. Простое решение без лишних библиотек.У меня была такая же проблема, и я написал это решение.
Он начинает опрос каждого поля ввода при загрузке страницы (я установил 10 секунд, но вы можете настроить это значение).
Через 10 секунд он прекращает опрос в каждом поле ввода и начинает опрос только на сфокусированном входе (если он есть). Он останавливается, когда вы размыте вход, и снова запускается, если вы фокусируете один.
Таким образом, вы будете опрашивать только тогда, когда это действительно необходимо, и только по действительным данным.
Это не очень хорошо работает, когда вы автоматически вставляете несколько значений, но его можно настроить, просматривая каждый ввод в текущей форме.
Что-то вроде:
источник
Если вы хотите только определить, использовалось ли автоматическое заполнение или нет, а не точно определить, когда и в каком поле использовалось автоматическое заполнение, вы можете просто добавить скрытый элемент, который будет заполняться автоматически, а затем проверить, содержит любое значение. Я понимаю, что это может быть не тем, что интересует многих. Установите поле ввода с отрицательным индексом tabIndex и с абсолютными координатами далеко за пределами экрана. Важно, чтобы входные данные были частью той же формы, что и остальные входные данные. Вы должны использовать имя, которое будет выбрано автоматическим заполнением (например, «второе имя»).
Добавьте этот ввод в форму и проверьте его значение при отправке формы.
источник
Там же , как представляется, решение к этому , что не опирается на опрос (по крайней мере , для Chrome). Это почти так же хакерски, но я думаю, что немного лучше, чем глобальный опрос.
Рассмотрим следующий сценарий:
Пользователь начинает заполнять поле1
Пользователь выбирает предложение автозаполнения, которое автоматически заполняет field2 и field3
Решение: Зарегистрируйте onblur во всех полях, который проверяет наличие автоматически заполненных полей с помощью следующего фрагмента jQuery $ (': - webkit-autofill')
Это не будет немедленным, так как оно будет отложено до тех пор, пока пользователь не размывает поле field1, но оно не зависит от глобального опроса, поэтому IMO - это лучшее решение.
Тем не менее, поскольку нажатие клавиши ввода может отправить форму, вам также может понадобиться соответствующий обработчик для onkeypress.
Кроме того, вы можете использовать глобальный опрос для проверки $ (': - webkit-autofill')
источник
Исходя из моего личного опыта, приведенный ниже код хорошо работает с Firefox IE и Safari, но не очень хорошо работает при выборе автозаполнения в Chrome.
Приведенный ниже код работает лучше, потому что он будет срабатывать каждый раз, когда пользователь нажимает на поле ввода, и оттуда вы можете проверить, является ли поле ввода пустым или нет.
источник
Мне удалось на хром с:
источник
Мое решение:
источник
После исследования проблема заключается в том, что браузеры webkit не запускают событие change при автозаполнении. Мое решение состояло в том, чтобы получить класс автозаполнения, который добавляет webkit, и инициировать событие изменения самостоятельно.
Вот ссылка на выпуск хрома. https://bugs.chromium.org/p/chromium/issues/detail?id=636425
источник
Например, чтобы обнаружить электронную почту, я пытался «при изменении» и наблюдателя мутаций, ни один не работал. setInterval хорошо работает с автозаполнением LinkedIn (не раскрывая весь мой код, но вы поняли идею) и хорошо работает с бэкэндом, если вы добавите здесь дополнительные условия для замедления AJAX. И если нет никаких изменений в поле формы, например, если они не набирают текст для редактирования своей электронной почты, lastEmail предотвращает бессмысленные эхо-запросы AJAX.
источник
Мне было трудно обнаружить автозаполнение в Firefox. Это единственное решение, которое сработало для меня:
демонстрация
HTML:
CSS:
JavaScript:
Для Chrome я использую:
if ($(this).css('animation-name') == 'onAutoFillStart')
Для Firefox:
if ($(this).val() != '')
источник
попробуй в CSS
input:-webkit-autofill { border-color: #9B9FC4 !important; }
источник