如何判断浏览器是否已自动填充文本框?特别是用户名和密码框,自动填充页面加载。

我的第一个问题是,这在页面加载序列中什么时候发生?是在document.ready之前还是之后?

其次,我如何使用逻辑来找出是否发生了这种情况?这不是我想阻止这种情况发生,只是挂钩到事件。最好是这样的:

if (autoFilled == true) {

} else {

}

如果可能的话,我很想看到一个jsfiddle显示你的答案。

可能重复

DOM事件浏览器密码自动填充?

浏览器自动填充和Javascript触发事件

这两个问题都没有真正解释什么事件被触发,它们只是不断地重新检查文本框(对性能不好!)


当前回答

我有这个问题的完美解决方案,试试这个代码片段。 演示在这里

function ModernForm() { var modernInputElement = $('.js_modern_input'); function recheckAllInput() { modernInputElement.each(function() { if ($(this).val() !== '') { $(this).parent().find('label').addClass('focus'); } }); } modernInputElement.on('click', function() { $(this).parent().find('label').addClass('focus'); }); modernInputElement.on('blur', function() { if ($(this).val() === '') { $(this).parent().find('label').removeClass('focus'); } else { recheckAllInput(); } }); } ModernForm(); .form_sec { padding: 30px; } .form_sec .form_input_wrap { position: relative; } .form_sec .form_input_wrap label { position: absolute; top: 25px; left: 15px; font-size: 16px; font-weight: 600; z-index: 1; color: #333; -webkit-transition: all ease-in-out 0.35s; -moz-transition: all ease-in-out 0.35s; -ms-transition: all ease-in-out 0.35s; -o-transition: all ease-in-out 0.35s; transition: all ease-in-out 0.35s; } .form_sec .form_input_wrap label.focus { top: 5px; color: #a7a9ab; font-weight: 300; -webkit-transition: all ease-in-out 0.35s; -moz-transition: all ease-in-out 0.35s; -ms-transition: all ease-in-out 0.35s; -o-transition: all ease-in-out 0.35s; transition: all ease-in-out 0.35s; } .form_sec .form_input { width: 100%; font-size: 16px; font-weight: 600; color: #333; border: none; border-bottom: 2px solid #d3d4d5; padding: 30px 0 5px 0; outline: none; } .form_sec .form_input.err { border-bottom-color: #888; } .form_sec .cta_login { border: 1px solid #ec1940; border-radius: 2px; background-color: #ec1940; font-size: 14px; font-weight: 500; text-align: center; color: #ffffff; padding: 15px 40px; margin-top: 30px; display: inline-block; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <form class="form_sec"> <div class="row clearfix"> <div class="form-group col-lg-6 col-md-6 form_input_wrap"> <label> Full Name </label> <input type="text" name="name" id="name" class="form_input js_modern_input"> </div> </div> <div class="row clearfix"> <div class="form-group form_input_wrap col-lg-6 col-md-6"> <label> Emaill </label> <input type="email" name="email" class="form_input js_modern_input"> </div> </div> <div class="row clearfix"> <div class="form-group form_input_wrap col-lg-12 col-md-12"> <label> Address Line 1 </label> <input type="text" name="address" class="form_input js_modern_input"> </div> </div> <div class="row clearfix"> <div class="form-group col-lg-6 col-md-6 form_input_wrap"> <label> City </label> <input type="text" name="city" class="form_input js_modern_input"> </div> <div class="form-group col-lg-6 col-md-6 form_input_wrap"> <label> State </label> <input type="text" name="state" class="form_input js_modern_input"> </div> </div> <div class="row clearfix"> <div class="form-group col-lg-6 col-md-6 form_input_wrap"> <label> Country </label> <input type="text" name="country" class="form_input js_modern_input"> </div> <div class="form-group col-lg-4 col-md-4 form_input_wrap"> <label> Pin </label> <input type="text" name="pincode" class="form_input js_modern_input"> </div> </div> <div class="row cta_sec"> <div class="col-lg-12"> <button type="submit" class="cta_login">Submit</button> </div> </div> </form>

其他回答

WebKit浏览器的解决方案

来自MDN文档:-webkit-autofill CSS伪类:

当一个元素的值被浏览器自动填充时,CSS伪类就会匹配

我们可以在<input>元素为:-webkit-autofill时定义一个void transition css规则。JS将能够钩到animationstart事件。

感谢Klarna UI团队。这里可以看到它们的实现:

CSS规则 JS钩

对于任何正在寻找2020年纯JS解决方案来检测自动填充的人来说,这里就是。

请原谅标签错误,不能让这坐得很好,所以

    //Chose the element you want to select - in this case input
    var autofill = document.getElementsByTagName('input');
    for (var i = 0; i < autofill.length; i++) {
      //Wrap this in a try/catch because non webkit browsers will log errors on this pseudo element
      try{
        if (autofill[i].matches(':-webkit-autofill')) {
            //Do whatever you like with each autofilled element
        }
      }
      catch(error){
        return(false);
      }
     }

我的解决方案:

像往常一样监听更改事件,并在DOM内容加载上执行以下操作:

setTimeout(function() {
    $('input').each(function() {
        var elem = $(this);
        if (elem.val()) elem.change();
    })
}, 250);

这将在用户有机会编辑所有非空字段之前触发更改事件。

我用这个方法来解决同样的问题。

HTML代码应该改为这样:

<input type="text" name="username" />
<input type="text" name="password" id="txt_password" />

jQuery代码应该在document.ready中:

$('#txt_password').focus(function(){
    $(this).attr('type','password');
});

这是一个解决方案的浏览器与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添加到填充的输入中。此外,我尝试检查输入类型的密码值或长度,但它只是在页面上发生的一些事件后工作。所以我试图触发一些事件,但没有成功。现在这是我的解。 享受吧!