Обнаружение автозаполнения при вводе формы с помощью jQuery

Событие изменения jQuery срабатывает только при размытии. Событие keyup будет срабатывать по мере ввода. Ни один огонь при нажатии опции автозаполнения. Я также ищу способ обнаружить это, но в настоящее время я использую

$(selector).bind("change keyup",function(){
    //Do something, probably with $(this).val()
});

Но это не совсем решает проблему ...

Вы можете попробовать использовать on input для обнаружения текстовых изменений (кроме таких ключей, как ctrl и shift) в <input>.

Например:

$(input).on('input', function() { 
    console.log($(this).val()); 
});

Я использовал

$(selector).on("change keyup blur input", function() {});

что помогло в Chrome. input - это то, что заставило его работать с автозаполнением.

Моя проблема заключалась в обнаружении автозаполнения (через плагин, например lastpass или 1password), а также в описанной выше проблеме.

Решение, которое сработало для меня, было:

$(function(){    
    function validate(){
        if($('#email').val() !== '' && $('#password').val() !== '')
            $('#submit').prop('disabled', false);
        else
            $('#submit').prop('disabled', true);
    }

    // Validate after user input
    $('#email, #password').on('keyup change', validate);

    // Validate on mouse enter of body and login form
    // to catch auto-fills from roboform/1password etc...
    $('body, #loginform').on('mouseenter', validate);

    // Validate onload incase of autocomplete/autofill
    validate();
});

См. демонстрацию в JSFiddle.

Вы можете использовать функцию jQuery .change().

После первоначальной загрузки страницы вы можете проверить всю форму, просто чтобы убедиться, что она действительно не заполнена. После этого вы можете использовать _ 2_, чтобы проверить, не изменилось ли что-то в форме, и, если что-то изменилось, еще раз подтвердите форму.

$(document).ready(function() {
   // validate form once, just to be sure (if valid, activate submit button)
});
...
<form>
  <input class="target" type="text" value="Field 1" />
  <select class="target">
    <option value="option1" selected="selected">Option 1</option>
    <option value="option2">Option 2</option>
  </select>
</form>
<script type="text/javascript">     
    $('.target').change(function() {
        alert('Something changed');
        // Try validating form again (if valid, activate submit button)
    });
</script>

План Б

Другой вариант - всегда иметь кнопку отправки кликабельной, но использовать .submit(), чтобы привязать ее к валидатору формы. . Затем, если форма действительна, продолжайте. Если форма НЕПРАВИЛЬНА, используйте .preventDefault(), чтобы остановить отправку формы .... . и вы также отобразите предупреждающее сообщение с указанием отсутствующих полей.

Ответ был дан в this вопрос. Он не использует jQuery, но работает с автозаполнением:

Используйте событие js onpropertychange.

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

$("#emailaddress").bind("keyup", function() {
    displayFullSubcribeForm();
});

$(".center_left_box").bind("mouseover", function() {
    displayFullSubcribeForm();
});

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

Чтобы сделать это для обычного ввода, я смог подключить keyup с функцией debounce, а blur подключен для немедленной проверки. Хотя кажется, что keyup запускается lastpass, поскольку я его отклонил, произошла задержка проверки. Благодаря @ peter-ajtai я попытался добавить событие change, и оно действительно улавливает последний проход и оставляет другие тонкости в покое.

Пример Coffeescript:

@fieldExp .keyup($.debounce(@_onExpChange, 3000)) .blur(@_onExpChange) .change(@_onExpChange)

Это сработало, и заполнение формы lastpass вызывает немедленную проверку.

это идеальное решение, гарантированно работающее

$(document).bind('mouseover', function(){
        liveValidate();
    });