通过浏览器对表单自动填充做出反应

React to form auto-filling by browser

本文关键字：填充 浏览器 表单      更新时间：2023-09-26

我有两个表单元素，一个email和一个password。只有在email元素中输入了某些内容时，才必须显示password元素。也就是说，仅当email不为空时。

<input id="email" name="email" onblur="if (jQuery(&quot;#email&quot;).val() === &quot;&quot;) { jQuery(&quot;#password&quot;).hide(); } else { jQuery(&quot;#password&quot;).show(); }" onchange="if (jQuery(&quot;#email&quot;).val() === &quot;&quot;) { jQuery(&quot;#password&quot;).hide(); } else { jQuery(&quot;#password&quot;).show(); }" onfocus="if (jQuery(&quot;#email&quot;).val() === &quot;&quot;) { jQuery(&quot;#password&quot;).hide(); } else { jQuery(&quot;#password&quot;).show(); }" placeholder="Email" style="width:360px;height:28px;margin-bottom:0px;" type="text">

正如你所看到的，我正在处理三个事件：

  • onfocus：这样当焦点进入电子邮件元素时我会做出反应
  • onblur：这样当焦点离开电子邮件元素时我会做出反应
  • onchange：以便在电子邮件元素更改时做出反应

事实上，我只想在电子邮件更改时运行脚本。我不关心焦点，但我无法处理一般的更改事件。

此外，这也是我的主要问题，我无法对浏览器自动填写表单时生成的事件做出反应。有这样的事件吗？我该怎么处理？

浏览器自动填充在初始页面呈现时发生。您是否尝试过在"onReady"回调中检查字段？请注意，此事件仅由Jquery等更高级别的实现提供，而不是由浏览器直接提供。

jquery的"就绪"回调示例：（更新以反映注释）

$(function() {
  setTimeout(function() {
    $("#email").trigger('change');
  }, 200);
});

还有一篇文章解释了"自己动手"：http://dustindiaz.com/smallest-domready-ever

您可以尝试禁用浏览器自动完成功能；

<form action="demo_form.asp" method="get" autocomplete="off">

或

<INPUT NAME="name" SIZE=40 AUTOCOMPLETE=OFF>

注意。第一个是HTML5<form>自动完成属性

相关文章：