Targeting all text input fields
March 28, 2024 4:05 PM
How can I target all text input fields to add the "autocomplete = off" tag so that the browsers don't try to fill them with things like names, cities, addresses, etc. when users are working on a course?
For context, I have a software simulation where I have fields for first name, last name, city, and "business org" where Chrome (at least so far in testing) is pulling up the autocomplete list as soon as a user clicks into the entry field. In some baseline testing, it looks like adding "autocomplete = "off"" to the properties for the input field itself resolves this, at least in Chrome, but I can't figure out how to add the attribute, whether it's at the object level or with CSS (I don't think it's a CSS attribute, anyway).
I tried adding the following JS to one of the entry fields, but that didn't seem to add the attribute:
"document.getElementById("entryXXXXXid").autocomplete = "off";
Obviously, I could rename the fields so they aren't "name" or "city" or "business", but that causes issues with accessibility because then the field names aren't correct for screen readers. All other options will be entertained!
Discussion (6)
Hi Jason,
Try something like this:
triv$('input',getDisplayDocument()).attr('autocomplete','off');
Kind regards,
Math
That's for seamless play, though, correct? I'm not using seamless play, so how would that apply in this scenario and not cause an error in JavaScript?
Shouldnot matter much. Should work in either seamless or not..
Only the getDisplayDocument() makes sure it works properly in Seamless Play. You can delete that and use it without, but shouldnot be needed.
Well, that did add the attribute to the fields, but sadly does not resolve the issue where Chrome is trying to fill in fields with data. Reading up on Stack Overflow and others, this may not be something that can resolved other than by renaming fields with obscure labels. 
Gonna dive somewhat deeper into this...as im sure i have it solved somewhere somehow.
Jason ? Can you share a sample of this...as i cannot replicate it..my inputfields stay clean and empty ;-)
This might be a solution:
https://terryl.in/en/disableautofill/