Detect Autocomplete

Question

Hello,

I have some forms that have inlined labels. I have some javascript (jQuery) that detects when focus has changed or when a user is entering text that changes the class so that the inlined label disappears and isn't blocking the user's view of their entered text.

The problem I'm having occurs when the browser autocompletes the form. None of the conditions below are triggered so I can't clear out the inlined label. How can I detect the fact that text has been entered via autocomplete so that I can clear the labels?

The js I'm using (from http://www.zurb.com/playground/inline-form-labels):

$( document ).ready(
    function()
    {
      $( "label.inlined + .input-text" ).each(
          function( type )
          {
            $( this ).focus( function()
            {
              $( this ).prev( "label.inlined" ).addClass( "focus" );
            } );
            $( this ).keypress(
                function()
                {
                  $( this ).prev( "label.inlined" ).addClass( "has-text" )
                      .removeClass( "focus" );
                } );
            $( this ).blur(
                function()
                {
                  if( $( this ).val() == "" )
                  {
                    $( this ).prev( "label.inlined" ).removeClass( "has-text" )
                        .removeClass( "focus" );
                  }
                } );
          } );
    } );

Thanks!

Bryan

Answer 1

Have you tried the change event?