Turn off autocorrect of input using CSS or JavaScript

Question

I need to turn off autocorrect with CSS/JavaScript. I cannot specify it in HTML because I generate multiple inputs over and over and this autocorrect red underline is very disturbing in my case.

I want to apply all these statements with CSS or JavaScript, but it seems that it's not possible.

<input autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />

Is there a way to generate multiple inputs without autocorrect underlining?

Answer 1

If the inputs already exist and you are unable to set their attributes at the time they are generated, then you could use querySelectorAll and then loop through the resulting nodelist to set their attributes like so:

const inputs = document.querySelectorAll('input');

inputs.forEach(input => {
  input.setAttribute('autocomplete', 'off')
  input.setAttribute('autocorrect', 'off')
  input.setAttribute('autocapitalize', 'off')
  input.setAttribute('spellcheck', false)
})

<input />
<input />
<input />
<input />

Answer 2

You can use something like this using JavaScript:

inputs = container.getElementsByTagName('input');
for (i = 0; i < inputs.length; ++i) {
  inputs[i].removeAttribute('autocomplete');
}