Turn off autocorrect of input using CSS or JavaScript - Stack Overflow

admin管理员组

文章数量:1340759

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

Share Improve this question Follow edited Jul 18, 2021 at 17:36 Peter Mortensen 31.6k2222 gold badges110110 silver badges133133 bronze badges asked Oct 13, 2018 at 20:48 JsindlJsindl 11511 silver badge77 bronze badges 4

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 10

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');
}

本文标签： Turn off autocorrect of input using CSS or JavaScriptStack Overflow