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?

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?

• javascript
• dom

• Probably better solved with a placeholder these days. – Mrten Commented Jun 11, 2020 at 19:59
• Does this answer your question? Detecting Browser Autofill – Jasper de Vries Commented Jul 29, 2021 at 9:49

6 Answers 6

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.

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.

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)

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

No event exists.

The Chrome browser does not fill in the username and password fields in the DOM until there is user interaction (similar to how we cannot play sound before the first user interaction). However, the question arises: why hasn’t Chrome introduced an event listener for inputs that fires when autofill is applied? This would allow us to hide the floating label without promising security, as we still wouldn't have access to the user's password.

A big thanks to https://medium./weekly-webtips/detecting-chrome-autofill-on-page-load-78ea178e4a68 for the insights! In Chrome, the appearance of an input field changes from auto to menulist-button when autofill is applied. We can check this change using window.getComputedStyle(input).getPropertyValue('appearance'). Unfortunately, we can only detect this change using setTimeout or setInterval, as MutationObserver does not trigger an event for this particular change.

WARN: Your input cannot have the appearance property set to any specific value; you must preserve the user-agent default.

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/nilesh_ramteke/nt7a1ruw/20/

Please configure your browser for autofill before trying above solution.