CODEWITHSUNDEEP
javascriptjqueryjquery-events
blueFast
blueFast

Reputation: 44351

React to form auto-filling by browser

I have two form elements, a email and a password. The password element must only be shown if something has been entered in the email element. That is, only if email is not empty.

<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">

As you see I am handling three events:

Actually, I only want to run the script whenever the email changes. I do not care about focus, but I am unable to handle a generic change event.

Besides, and this is my main problem, I am not able to react to the the event generated when the browser is auto-filling the form. Is there such an event? How can I handle it?

Upvotes: 1

Views: 899

Answers (2)

yadutaf
yadutaf

Reputation: 7132

Browser auto-filling occurs on initial page rendering. Have you tried checking the field in an "onReady" callback? Note that this event is only provided by higher level implementations like Jquery, not directly by the browser.

Example of "ready" callback with jquery: (updated to reflect the comments)

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

There is also an article explaining the "do it yourself way": http://dustindiaz.com/smallest-domready-ever

Upvotes: 1

Alfred
Alfred

Reputation: 21386

You may try disabling the browser autocomplete feaure by;

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

or

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

Note. The first one is HTML5 <form> autocomplete Attribute

Upvotes: 1

Related Questions