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

我的第一个问题是,这在页面加载序列中什么时候发生?是在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>

其他回答

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';

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

似乎有一个解决方案,不依赖轮询(至少Chrome)。它几乎是一样的粗鄙,但我确实认为比全球民意调查好一点。

考虑以下场景:

用户开始填写字段1 用户选择一个自动完成建议,自动填充field2和field3

解决方案:在所有字段上注册一个onblur,通过下面的jQuery片段$(':-webkit-autofill')检查自动填充字段的存在

这不会是立即的,因为它会延迟到用户模糊field1,但它不依赖于全局轮询,所以在我看来,这是一个更好的解决方案。

也就是说,由于按回车键可以提交表单,您可能还需要相应的onkeypress处理程序。

或者,你可以使用全局轮询来检查$(':-webkit-autofill')

从我个人的经验来看,下面的代码在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();
});

对于任何正在寻找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);
      }
     }

我还面临着同样的问题,标签没有检测到自动填充和动画在填充文本上移动标签重叠,这个解决方案对我有用。

input:-webkit-autofill ~ label {
    top:-20px;
}