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: 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.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?

Answers:

Answer

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.

Answer

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.

Answer

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)

Answer

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

Answer

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.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.