How do I trigger my Javascript form handlers on form auto-fill?

Question

I've built a form similar to Twitter's login, ie. there's a <span> holding a label for each <input>... then on keypress, the label animates it's font-size to 0. It's a cool effect.

The problem I've noticed, is that if you use a form auto-filler, only the form that fired the initial keypress event correctly animates it's label--the other labels don't properly animate away, and thus overlap the input's value.

My question is this... how to compensate for this? What events are being fired when a form auto-filler enters input values, and more specifically, how would I utilize them with jQuery?

. . .

Sample form below:

<div class="name">
    <input class="name" name="name" type='text' value="<?php echo $name; ?>">
    <span>Full Name</span>
</div>

. . .

Sample jQuery below:

$(function(){
    // On document ready, check form fields
    $(':input').each(function() {
        if($(this).val() === "") {
            $(this).next('span').animate({fontSize:16},'fast');
        }
    });

    // On form focus, adjust colors
    $(':input').focus(function() {
        $(this).addClass('focus');
        $(this).next('span').addClass('focus');
    });

    // On keypress, remove label
    $(':input').keypress(function() {
        $(this).next('span').animate({fontSize:0},'fast',function(){
            $(this).hide();
        });
    });

    // On form blur, restore colors and label
    $(':input').blur(function() {
        $(this).removeClass('focus');
        $(this).next('span').removeClass('focus');
        if($(this).val() == '') {
            $(this).next('span').show().animate({fontSize:16},'fast');
        }
    });

    // Pass span 'click' event to input
    $('form span').click(function() {
        $(this).prev('input').trigger('focus');
    });
});

What do you mean by "form auto-filler"? If I understand correctly you have some javascript filling values from local variables and/or ajax and this is not triggering the events that you've listed above? My guess is that you'd have to have the auto-filler trigger these events manually or otherwise manually trigger an event to check the auto-fill values. — James Alday, Oct 18 '11 at 21:01
@James - It seems fairly standard that browsers offer some type of form auto-complete, but I'm asking about the events actually firing when that happens; the ones I've tried aren't triggering, and `.change()` actually works on all the form fields except the initial one the user clicks. I was hoping someone had more insight into the actual events that fire during browser form auto-complete for a more thorough solution. — jlmakes, Oct 19 '11 at 01:40
possible duplicate of http://stackoverflow.com/questions/7685146/how-to-bind-to-browser-change-of-input-field-jquery/ — Lightness Races in Orbit, Oct 19 '11 at 21:44
This might, or might not be a solution: if you check the fields for their values *onload*, couldn't you compare them to an empty string and if they are different then assume they were filled by the browser? — JCOC611, Oct 19 '11 at 21:54
I think a better term is `placeholder text`. I had trouble sussing `autofiller`. — fncomp, Oct 20 '11 at 02:53

score 1 · Accepted Answer · answered Apr 06 '15 at 06:53

1

Considering using the https://github.com/tbosch/autofill-event library, which handles all the odd browser cases for you.

answered Apr 06 '15 at 06:53

Paul Irish

47,354
22
98
132

Ha. Raising an old question from the dead. – Bart Apr 06 '15 at 13:35

score 1 · Answer 2 · edited May 23 '17 at 11:56

1

Sounds similar to this issue: How to bind to browser change of input field? (jQuery)

In essence, browsers do not seem recognize the onchange event when dealing with autofillers.

The best solution I've seen out there (and I know it is not ideal) is checking the field's value over and over again via an interval. You'll find some codez for the basic idea in the above linked "similar" question.

edited May 23 '17 at 11:56

Community

1
1

answered Oct 19 '11 at 21:43

Bart

6,694
6
43
53

It's not the same question because the behavior of autofill isn't similar to a user entering data into a field (because reasons.) – Paul Irish Apr 06 '15 at 06:53

score 0 · Answer 3 · answered Sep 05 '11 at 02:25

0

Did you try the change-event? http://api.jquery.com/change/

answered Sep 05 '11 at 02:25

Simon Stender Boisen

3,413
20
23

According to the documentation, the .change() jQuery method fires when you leave the field. I tried this, and it appears to work for the auto-filled inputs, but not the input you initially clicked on... you have to blur to see the change there; I still need something for that field. – jlmakes Oct 14 '11 at 06:49

How do I trigger my Javascript form handlers on form auto-fill?

3 Answers3