Why doesn't this code work the whole time?

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.

Why would it run on a click? It's executed onLoad, once, and you're at the mercy of DOM rendering. Consider $(function() {}) and event handlers? — Dave Newton, Jan 10 '12 at 21:40
The `input:-webkit-autofill` doesn't look like a valid selector to me... is it even returning anything? And why are you only looking for Chrome, you know Safari is also a webkit browser? — Mottie, Jan 10 '12 at 21:48
@fudgey Well, it is a valid webkit selector, and, as I said, it works sometimes, I am only looking for chrome as it is the only one who fills in the background color when anything autocompleted. — H Bellamy, Jan 10 '12 at 21:52
This has already been answered here... [removing input background colour for chrome autocomplete](http://stackoverflow.com/questions/2781549/removing-input-background-colour-for-chrome-autocomplete)? — Mottie, Jan 10 '12 at 22:00

score 0 · Accepted Answer · edited May 23 '17 at 10:24

0

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?

edited May 23 '17 at 10:24

Community

1
1

answered Jan 10 '12 at 21:41

Peter Ehrlich

6,969
4
49
65

this is what I am doing. But I found this was a way to preserve the text without switching off autocomplete – H Bellamy Jan 10 '12 at 21:42

Why doesn't this code work the whole time?

1 Answers1