javascript - 如何让浏览器在输入文本时自动完成 "handle"？

Question

我有一个输入文本登录名/密码，我使用一个在输入中显示的标签，当输入获得焦点时，标签被隐藏，当输入时如果值不等于“”，它会模糊标签再次显示，使用 focus()/blur() 函数效果很好，但是，我怎么能处理浏览器自动填充，因为 change() 函数不起作用，因为永远不会获得焦点，是有办法处理这个吗？

我不想通过将其设置为关闭来禁用自动完成功能，我认为这对用户来说并不是很友好。

我想每 n 毫秒使用一个计时器，但我想使用更好的方法。

有什么想法吗？

这是我的脚本:

$('#form-login input.inputbox').focus(
   function()
   {
        $('#label-' + $(this).attr('id')).addClass('hidden');
   }
);

$('#form-login input.inputbox').blur(
   function()
   {
        if ($(this).val() == "")
        {
            $('#label-' + $(this).attr('id')).removeClass('hidden');
        }
   }
);

Answer 1

已经有几个 jQuery 插件可以做到这一点；我推荐this one .

要回答您的问题(如果您真的想重新发明轮子)，您是在谈论自动完成还是保存的登录信息？

如果你在谈论自动完成，它只会在字段被聚焦时发生(AFAIK)，所以你不必担心。

如果您谈论的是保存的登录信息，我相信它们会在页面加载完成之前或之后填写，因此您可以检查页面加载(或 1 秒后使用 setTimeout) 该字段是否为空。

HTML5 有一个新的 placeholder attribute这样做，但浏览器尚不支持。

---

顺便说一句，您可以使用以下选择器代替给每个标签一个 ID:

$('label[for='" + $(this).attr('id') + "'])