例如，为了检测电子邮件，我尝试了“on change”和突变观察者，但都不起作用。setInterval与LinkedIn自动填充一起工作得很好(不透露我所有的代码，但你知道的)，如果你在这里添加额外的条件来降低AJAX的速度，它与后端一起工作得很好。如果表单字段没有变化，比如他们没有输入来编辑他们的电子邮件，lastEmail会阻止毫无意义的AJAX ping。

// lastEmail needs scope outside of setInterval for persistence.
var lastEmail = 'nobody';
window.setInterval(function() { // Auto-fill detection is hard.
    var theEmail = $("#email-input").val();
    if (
        ( theEmail.includes("@") ) &&
        ( theEmail != lastEmail )
    ) {
        lastEmail = theEmail;
        // Do some AJAX
    }
}, 1000); // Check the field every 1 second

除了其他答案，我喜欢添加这个帮助函数，它可以防止脚本错误，你可以使用例如在DOMContentLoaded或onload(与setTimeout >=500一起，因为有一些延迟，直到浏览器自动填充)，在输入元素上的onchange或表单上的onsubmit:

function isAutofilled(element) {
  return [":autofill", ":-webkit-autofill", ":-moz-autofill"].some((selector) => {
    try {
      return element.matches(selector);
    } catch {
      return false;
    }
  });
}

If you only want to detect whether auto-fill has been used or not, rather than detecting exactly when and to which field auto-fill has been used, you can simply add a hidden element that will be auto-filled and then check whether this contains any value. I understand that this may not be what many people are interested in. Set the input field with a negative tabIndex and with absolute coordinates well off the screen. It's important that the input is part of the same form as the rest of the input. You must use a name that will be picked up by Auto-fill (ex. "secondname").

var autofilldetect = document.createElement('input');
autofilldetect.style.position = 'absolute';
autofilldetect.style.top = '-100em';
autofilldetect.style.left = '-100em';
autofilldetect.type = 'text';
autofilldetect.name = 'secondname';
autofilldetect.tabIndex = '-1';

将此输入附加到表单，并在表单提交时检查其值。

好吧，如果我们谈论的是控制输入，这可能是一个可能的解决方案:

    useEffect(() => {
      const inputEl = inputRef.current
      inputEl.addEventListener('focusout', () => props.onChange(inputRef.value))
    }, [])

注意，这可能会导致不必要的渲染。这种解决方案的优点是简单性和所有浏览器的支持。在小型形式中使用这种方法似乎是完全可以接受的。

从我个人的经验来看，下面的代码在firefox IE和safari中工作得很好，但在chrome中选择自动完成时工作得不太好。

function check(){
clearTimeout(timeObj);
 timeObj = setTimeout(function(){
   if($('#email').val()){
    //do something
   }
 },1500);
}

$('#email').bind('focus change blur',function(){
 check();
});

下面的代码工作得更好，因为它会触发每次用户点击输入字段，从那里你可以检查输入字段是否为空。

$('#email').bind('click', function(){
 check();
});

不幸的是，我发现唯一可靠的方法来检查这个跨浏览器是轮询输入。为了使它具有响应性，还需要侦听事件。 Chrome已经开始隐藏javascript的自动填充值，这需要一个hack。

Poll every half to third of a second ( Does not need to be instant in most cases ) Trigger the change event using JQuery then do your logic in a function listening to the change event. Add a fix for Chrome hidden autofill password values. $(document).ready(function () { $('#inputID').change(YOURFUNCTIONNAME); $('#inputID').keypress(YOURFUNCTIONNAME); $('#inputID').keyup(YOURFUNCTIONNAME); $('#inputID').blur(YOURFUNCTIONNAME); $('#inputID').focusin(YOURFUNCTIONNAME); $('#inputID').focusout(YOURFUNCTIONNAME); $('#inputID').on('input', YOURFUNCTIONNAME); $('#inputID').on('textInput', YOURFUNCTIONNAME); $('#inputID').on('reset', YOURFUNCTIONNAME); window.setInterval(function() { var hasValue = $("#inputID").val().length > 0;//Normal if(!hasValue){ hasValue = $("#inputID:-webkit-autofill").length > 0;//Chrome } if (hasValue) { $('#inputID').trigger('change'); } }, 333); });