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

У меня есть форма, которая определяет, действительны ли все текстовые поля на каждом keyup() и focus(); если они все действительны, это позволит пользователю нажать кнопку отправки. Однако если пользователь заполняет один из текстовых входов функцией автозаполнения браузеров, это предотвращает включение кнопки отправки.

есть ли способ определить, изменился ли какой-либо вход независимо от того, как он был изменен, используя jQuery?

9 ответов


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

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

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


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

например:

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


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

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

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

вы можете использовать jQuery .change()


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

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


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

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

пример Coffeescript:

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

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


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

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