Значения автозаполнения Chrome не могут быть отражены в jQuery

Question

У меня есть очень простая форма ниже:

<form action="goto.html" method="post" validate>
            <input type="text" name="username"  required>
            <br/>
            <input type="password" name="password" required>
            <br/>
            <button type="submit">submit</button>
 </form>  

Эта форма автоматически заполняется в Chrome, но в jQuery, когда я делаю :: -

console.log($('[name="username"]').val())  

Я не получаю значениявообще, даже пробовал следующее:

setInterval( function(){
        console.log('value is ::-')      
        console.log($('[name="username"]').val())      
    }, 500 );

Если вы не нажмете внутри браузера, значение не будет отображаться, как только вы нажмете правильное значение, будет выведено на консоль.

Даже если яискусственно вызвать щелчок, например, так:

setTimeout( function() {
        $('body')
            .trigger('click');
    } , 3000 );

setInterval по-прежнему будет регистрировать пропуски, если я не нажму в браузере.

Есть ли обходной путь для этого?Найдена похожая проблема ЗДЕСЬ , но упомянутые решения не работают.

Answer 1

Существует хакерское решение, которое я нашел некоторое время назад, но я не помню где.Это работает, потому что Javascript способен отслеживать CSS-анимацию автозаполнения в Chrome.

Часть CSS:

@keyframes onAutoFillStart {  from {/**/}  to {/**/}}
@keyframes onAutoFillCancel {  from {/**/}  to {/**/}}

.my-input:-webkit-autofill {
    animation-name: onAutoFillStart;
    /* VERY slow dummy animation --> */
    transition: background-color 50000s ease-in-out 0s;
}
.my-input:not(:-webkit-autofill) {
    animation-name: onAutoFillCancel;
}

Часть Javascript / JQuery:

$(document).on('animationstart', '.my-input', function(event) {
    var input = $(event.target).closest('.my-input');
    switch(event.originalEvent.animationName) {
        case 'onAutoFillStart':
            console.log(input.val());
            // ... do some other stuff
            break;   
        case 'onAutoFillCancel':
            if(input.val() == '') {
                console.log(input.val());
                // ... do some other stuff
            }
    }
});

[РЕДАКТИРОВАТЬ] Я нашел оригинальный источник здесь здесь