DOM event for browser password autofill?

Question

I've got a fairly standard username/password entry box on a web site I'm building. The password box has a div containing "Password" overlaid on top of it, which is set to display: none; on focus or click.

This works great until the user asks their browser to remember the password: in that case you can end up with the situation in the attached screen shot.

My question then is: is there an event that I can bind to that will trigger when the password field autofills so I can hide the help div?

Does this answer your question? [Detecting Browser Autofill](https://stackoverflow.com/questions/11708092/detecting-browser-autofill) — Jasper de Vries, Jul 29 '21 at 09:49

score 1 · Answer 1 · answered Aug 21 '10 at 00:30

1

Here's the crappy solution I came up:

I added an interval timer to the site that checks the value of the box, and hides the help text when the value is not an empty string.

answered Aug 21 '10 at 00:30

Bryan Larsen

9,468
8
56
46

1

often the password doesn't autofill until you fill in/select the username – Bryan Larsen Aug 21 '10 at 02:40

score 0 · Answer 2 · answered Apr 30 '14 at 13:34

I used the blur event on the username to check if the pwd field had been auto-filled.

$('#userNameTextBox').blur(function () {
        if ($('#userNameTextBox').val() == "") {
            $('#userNameTextBox').val("User Name");
        }
        if ($('#passwordTextBox').val() != "") {
            $('#passwordTextBoxClear').hide(); // textbox with "Password" text in it
            $('#passwordTextBox').show();
        }
    });

This works for IE, and should work for all other browsers (I've only checked IE)

score 0 · Answer 3 · answered Sep 02 '10 at 20:36

0

Why don't you verify if the password textbox is filled on the document.ready event and on each usernametextfield.onchange event? That way you don't need a timer and it should be right.

Note: It could be (I haven't tested this) that the onchange event will be triggered before the browser has filled in the password field. To handle that short timespan, you could launch the check a few 100 milliseconds later using setTimeOut.

answered Sep 02 '10 at 20:36

Peter

14,221
15
70
110

onchange is not triggered on the user name text field when autofill happens, but when the text field loses its focus. – Bryan Larsen Sep 08 '10 at 11:11
Autofill can occur two times: 1.when the DOM is loaded (document.ready()) 2. when a user manually enters a new value unto the username textfield. – Peter Sep 08 '10 at 12:12

score 0 · Answer 4 · answered Apr 19 '16 at 04:54

maybe my solution with jquery will catch your attention :). here is what i did for solution:

$('form input').bind('change', function(){
    $('form').find('input').each(function(){
      label = $(this).prev('label');
      if($(this).val()!==''){
        label.addClass('active');
      }
    });
});

first of all i bind change event with input field so when one of the input fields get changed i do the next step which is testing all input fields and any of them has changed value i make then what i want with it

for more clarification => JSFIDDLE

nilesh_ramteke · Answer 5 · 2018-12-24T10:34:45.547

For chrome :-webkit-autofill class works perfectly. For a browser independent solution I what found was, the mouseleave event is fired whenever mouse is hovered over the browser's autofill dropdown. You can write handler on the input or its parent elements or event window. see the code below.

In HTML:

<div id="banner-message">  
    <div>
        <input type="text" id="name" name="name" placeholder="name"/> 
    </div>
    <div>
        <input type="text" id="email" name="email" placeholder="email"/> 
    </div>
    <div>
        <input type="password" name="password" placeholder="password"/> 
    </div>
</div>
<div id="event-log"> </div>

In jQuery:

var banner = $("#banner-message")
var eventlog = $("#event-log");
var inputs = $("input");

//Following event fired when hovered over autofill dropdown, 
banner.on("mouseleave", function(event) { 
    var targetid = event.target.id;  
    eventlog.html('Source id::'+targetid);
});

In the above code when the event is fired, event.target is the element from which the pointer is left and entered into dropdown. one thing to note here is, you have to identify the correct way to detect mouseleave which is fired only when autofilled.The above solution worked for me.

see this fiddle: https://jsfiddle.net/nilesh_ramteke/nt7a1ruw/20/

Please configure your browser for autofill before trying above solution.

DOM event for browser password autofill?

5 Answers5

Linked