Dom Event For Browser Password Autofill?

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:

Solution 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.

Solution 2:

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.

Solution 3:

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)

Solution 4:

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

Solution 5:

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:

<divid="banner-message"><div><inputtype="text"id="name"name="name"placeholder="name"/></div><div><inputtype="text"id="email"name="email"placeholder="email"/></div><div><inputtype="password"name="password"placeholder="password"/></div></div><divid="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.