Detect auto fill and stop focus

Question

I have a form that's constructed inside a quite graphical web app and the fields span many screens.

When a user uses the auto-fill function with their browser (namely chrome for taking away the ability for developers to stop auto-fill) the auto fill focus' on the last edited field.

The issue with this is because we have a handful of input fields per screen when the auto-fill fills out the info starting from say the name field it then auto populates down to the address which is much further away and skips many fields and screens and breaks some other visual aspects of the app.

In an idle world autocomplete being set to off would be enough but that's not going to happen thanks to chrome. So what I need now is a viable way to stop the focus from shifting the screen space to the last field.

But I'm not exactly sure how to detect a autofill event if there is one or how to rough detect it using JS or jQuery.

Totally just spit-balling, but what if you changed the names and ids of the input fields so chrome doesn't know what to autofill? — Rob C, Jan 23 '18 at 15:39
This might help https://stackoverflow.com/a/46874056/1819684 — gforce301, Jan 23 '18 at 15:59

score 0 · Answer 1 · answered Jan 23 '18 at 16:00

Is there something specific about your HTML structure or Javascript behavior that's causing the issue? I've created a test page in JSBin to try and isolate whether the last autofilled field is grabbing focus, and while testing in Opera (My Chrome autofill setting is locked to off by my company administrator), I'm not getting any scrolling to that field. Give it a try, and maybe post some of your HTML structure for us to try out:

http://jsbin.com/qomege/edit?html,output

<form>
  <div>name: <input type="text" name="name" /></div>
  <div>email: <input type="text" name="email" /></div>
  <div>address: <input type="text" name="address" /></div>
  <div>city: <input type="text" name="city" /></div>
  <div>state: <input type="text" name="state" /></div>
  <div style="padding-top:640px;">zip:<input type="text" name="zip" /></div>
  <div><input type="submit" /></div>
</form>

If that's the case, then that's a much simpler question, and one you can check out here: https://stackoverflow.com/questions/11708092/detecting-browser-autofill I'd also add that you can attach focus() and focusOut() event handlers to your fields, keeping track of which field the user is working with. If you get an onChange() event fired by something which doesn't currently have focus, then that might be a good indicator of whether autofill is being used. — Artif3x, Jan 25 '18 at 14:19

score 0 · Answer 2 · answered Jan 23 '18 at 17:11

how about :

setTimeout(focusTheFirstInput, 0);

and as far as I know, if you change the name and id of your inputs, the chrome will not able to find the proper input to fill, and also you can try to remove the "autocomplete" atrribute of inputs if they have one.

Detect auto fill and stop focus

2 Answers2