这是一个解决方案的浏览器与webkit渲染引擎。 当表单被自动填充时，输入将获得伪类:-webkit-autofill- (f.e. input:-webkit-autofill{…})。这是你必须通过JavaScript检查的标识符。

带有某种测试形式的解:

<form action="#" method="POST" class="js-filled_check">

    <fieldset>

        <label for="test_username">Test username:</label>
        <input type="text" id="test_username" name="test_username" value="">

        <label for="test_password">Test password:</label>
        <input type="password" id="test_password" name="test_password" value="">

        <button type="submit" name="test_submit">Test submit</button>

    </fieldset>

</form>

和javascript:

$(document).ready(function() {

    setTimeout(function() {

        $(".js-filled_check input:not([type=submit])").each(function (i, element) {

            var el = $(this),
                autofilled = (el.is("*:-webkit-autofill")) ? el.addClass('auto_filled') : false;

            console.log("element: " + el.attr("id") + " // " + "autofilled: " + (el.is("*:-webkit-autofill")));

        });

    }, 200);

});

页面加载时的问题是获取密码值，甚至长度。这是因为浏览器的安全性。还有超时，这是因为浏览器会在一段时间序列后填充表单。

这段代码将把类auto_filled添加到填充的输入中。此外，我尝试检查输入类型的密码值或长度，但它只是在页面上发生的一些事件后工作。所以我试图触发一些事件，但没有成功。现在这是我的解。 享受吧!

在Chrome和Edge(2020)中检查:-webkit-autofill会告诉你输入已经填充。但是，在用户以某种方式与页面交互之前，JavaScript无法获得输入中的值。

使用$('x').focus()和$('x').blur()或在代码中触发鼠标事件都没有帮助。

参见https://stackoverflow.com/a/35783761/32429

在chrome上，你可以通过为自动填充元素设置一个特殊的css规则来检测自动填充字段，然后用javascript检查元素是否应用了该规则。

例子:

CSS

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 30px white inset;
}

JavaScript

  let css = $("#selector").css("box-shadow")
  if (css.match(/inset/))
    console.log("autofilled:", $("#selector"))

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

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

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

我读了很多关于这个问题的文章，想提供一个非常快速的解决方法来帮助我。

let style = window.getComputedStyle(document.getElementById('email'))
  if (style && style.backgroundColor !== inputBackgroundNormalState) {
    this.inputAutofilledByBrowser = true
  }

我的模板的inputBackgroundNormalState是'rgb(255,255,255)'。

所以基本上当浏览器应用自动补全时，他们倾向于通过在输入上应用不同的(烦人的)黄色来指示输入是自动填充的。

编辑:这适用于所有浏览器

我遇到过同样的问题，我已经写出了这个解。

当页面加载时，它开始对每个输入字段进行轮询(我设置了10秒，但您可以调优这个值)。 10秒后，它将停止对每个输入字段的轮询，只对集中的输入(如果有的话)开始轮询。 当你模糊输入时，它会停止，如果你聚焦一个，它又会开始。

通过这种方式，您只在真正需要时轮询，并且只对有效输入进行轮询。

// This part of code will detect autofill when the page is loading (username and password inputs for example)
var loading = setInterval(function() {
    $("input").each(function() {
        if ($(this).val() !== $(this).attr("value")) {
            $(this).trigger("change");
        }
    });
}, 100);
// After 10 seconds we are quite sure all the needed inputs are autofilled then we can stop checking them
setTimeout(function() {
    clearInterval(loading);
}, 10000);
// Now we just listen on the focused inputs (because user can select from the autofill dropdown only when the input has focus)
var focused;
$(document)
.on("focus", "input", function() {
    var $this = $(this);
    focused = setInterval(function() {
        if ($this.val() !== $this.attr("value")) {
            $this.trigger("change");
        }
    }, 100);
})
.on("blur", "input", function() {
    clearInterval(focused);
});

当自动插入多个值时，它的工作效果不太好，但可以对它进行调整，查找当前表单上的每个输入。

喜欢的东西:

// This part of code will detect autofill when the page is loading (username and password inputs for example)
var loading = setInterval(function() {
    $("input").each(function() {
        if ($(this).val() !== $(this).attr("value")) {
            $(this).trigger("change");
        }
    });
}, 100);
// After 10 seconds we are quite sure all the needed inputs are autofilled then we can stop checking them
setTimeout(function() {
    clearInterval(loading);
}, 10000);
// Now we just listen on inputs of the focused form
var focused;
$(document)
.on("focus", "input", function() {
    var $inputs = $(this).parents("form").find("input");
    focused = setInterval(function() {
        $inputs.each(function() {
            if ($(this).val() !== $(this).attr("value")) {
                $(this).trigger("change");
            }
        });
    }, 100);
})
.on("blur", "input", function() {
    clearInterval(focused);
});