Question

我正在使用jquery在输入上开发占位符文本，当输入获得焦点时会略微淡化，并在用户键入时完全消失。这部分工作正常。因此，为了避免与保存的文本冲突，我将代码包装在：

if(!$($input).val()) {

...create placeholder, set up rules for fading it, etc...

}

如果用户有一个保存的密码，例如在Firefox中，浏览器将检测到输入有值，然后不创建占位符文本。

但是，在Chrome中，Chrome不会加载保存的值，直到页面“完成”加载...这意味着它检测到输入为空，创建占位符文本，然后在页面加载后，将保存的值放在输入中 - 导致占位符和密码相互叠加。

如何检测Chrome填写表单以避免这种不幸的重叠？

Answer 1

最后，我注意到Chrome在自动填充时不会触发任何类型的事件，但如果您等到window.load，然后检查是否有任何输入有-webkit-autofill，那么您可以检查它们。你可以看到我也在使用debouncer（Ben Alman - http://benalman.com/projects/jquery-throttle-debounce-plugin/）再等待200毫秒，就像在window.load之后它有时还没有放入自动填充文本......

$(window).load($.debounce(200, function () {

       if ($('input:-webkit-autofill')) {

           // We know that this form has autofill on its way. Let's check this again after a delay as its not always done on window.load

           $('input:-webkit-autofill').each(function () {

               if ($(this).val() !== "") {
                   $(this).parent().find('label').hide();
               }

           });

       }

    }));

Answer 2

我不知道何时会自动运行Chrome自动填充功能，而是在内部运行

$('input, select').on('focusin', function(evt) {...});

我已经收到所有字段的自动填充值。

（对我来说，这足以测试“脏”表格，即与原始值相比更改后的表格。）

Answer 3

要删除浏览器保存的信息，您可以在表单输入中使用属性 autocomplete="off"。

使用Jquery检测Chrome保存的输入信息？

3 个答案: