Question

我有两个表单元素，email和password。只有在password元素中输入了某些内容时，才能显示email元素。也就是说，只有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：以便我在电子邮件元素更改时做出反应

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

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

Answer 1

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

"ready" callback with jquery的示例:(已更新以反映评论）

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

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

Answer 2

您可以尝试按;

禁用浏览器自动填充功能

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

或

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

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

jQuery：对浏览器自动填充做出反应

2 个答案: