2

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

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

...创建占位符,设置淡化它的规则,等等...

}

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

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

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

4

3 回答 3

2

最后,我注意到 Chrome 在自动填充时不会触发任何类型的事件,但是如果你等到 window.load 然后检查是否有任何输入有 -webkit-autofill 你可以检查它们。如您所见,我还在使用去抖器(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();
               }

           });

       }

    }));
于 2012-01-19T11:07:39.137 回答
0

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

于 2021-02-19T00:48:03.137 回答
0

我不知道 Chrome 自动填充到底什么时候运行,但在里面

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

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

(对我来说,这足以测试“脏”表单,即与原始值相比值发生变化的表单。)

于 2020-07-15T12:04:28.767 回答