javascript - Chrome 自动填充值无法反射(reflect)在 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())  

我根本没有任何值(value)，甚至尝试了以下方法:

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

除非您在浏览器中单击，否则该值将不会显示，一旦您单击，控制台中就会输出正确的值。

即使我像这样人为地触发点击:

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

setInterval 仍会记录空白，除非我实际在浏览器中单击。

有什么解决办法吗？发现类似问题HERE ，但是提到的解决方案不起作用。

Answer 1

我之前发现了一个 hacky 解决方案，但我不记得在哪里了。它之所以有效，是因为 Javascript 能够跟踪 Chrome 中的自动填充 CSS 动画。

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
            }
    }
});

[编辑]我在这里找到了原始来源here