Question

I have this javascript code:

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0)
{
     $(window).load(function()
     {
          $('input:-webkit-autofill').each(function()
          {
                 var text = $(this).val();
                 var name = $(this).attr('name');
                 $(this).after(this.outerHTML).remove();
                 $('input[name=' + name + ']').val(text);
           });
     });
} 

It is designed to remove the background color of the webkit autofill background color in inputs.

However, it only works sometimes and doesn’t work when I click on an input, or a button that executes jQuery async functions at around the same time that the page loads.

What is wrong with this code that makes it not work sometimes, but work other times? What must I adapt?

This is what I am doing: How do you disable browser Autocomplete on web form field / input tag?

But I want to keep autocomplete on, while removing the background. I need this, as the background goes over a background image in my text input, so you can’t see it.

Answer 1

Is this what you’re attempting? How do you disable browser Autocomplete on web form field / input tag?

if not–
Can you confirm that all the elements are being selected, and that the problem lies in the timing of the browser’s autofill? What happens if you use the more common $.ready instead?