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 autoplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />

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

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 autoplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />

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

• javascript
• css
• autocorrect

• I don’t understand your claim that you can’t do it in html, or that “it seems that’s not possible.” What have you tried? For future reference, though: the ::spelling-error pseudo-element. Also, as my final edit to this ment, please share your minimal reproducible example code (in your question). – David Thomas Commented Oct 13, 2018 at 20:55
• How are you generating them? Why don't you generate them with the attributes? You can't do this from CSS. – skyline3000 Commented Oct 13, 2018 at 20:56
• For what I ve googled, there was only HTML way of setting it. I use DOM to create input element and I assign to each different values in its for loop. I tried to insert them with innerHTML, but then it started to be a bit confusing. Thanks for the pseudo element! This is what I've been searching for – Jsindl Commented Oct 14, 2018 at 8:39
• except that it's not supported by any browser :( – Jsindl Commented Oct 14, 2018 at 10:14

2 Answers 2

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('autoplete', 'off')
  input.setAttribute('autocorrect', 'off')
  input.setAttribute('autocapitalize', 'off')
  input.setAttribute('spellcheck', false)
})

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

You can use something like this using JavaScript:

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