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

Ответ 1

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

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

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

Ответ 2

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

Например:

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

Ответ 3

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

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

который сделал трюк в Chrome. input - это то, что заставило его работать на автозаполнение.

Ответ 4

Моя проблема заключалась в обнаружении автозаполнения (через плагин, такой как 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.

Ответ 5

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

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

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

Ответ 6

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

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

$(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>

План B

Другой вариант - всегда иметь кнопку отправки, но можно использовать .submit(), чтобы привязать ее к валидатору формы. Тогда, если форма действительна, продолжайте. Если форма НЕ действительна, используйте .preventDefault(), чтобы остановить подачу формы..... и вы увидите предупреждение также, указывая отсутствующие поля.

Ответ 7

Ответ указан в этом вопросе. Он не использует jQuery, но работает для Autocomplete:

Использовать событие js onpropertychange.

Ответ 8

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

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

Пример coffeescript:

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

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

Ответ 9

это окончательное решение, гарантированное работу

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