使用 CSS 或 JavaScript 关闭输入的自动更正答案

【问题标题】：Turn off autocorrect of input using CSS or JavaScript使用 CSS 或 JavaScript 关闭输入的自动更正
【发布时间】：2019-03-18 17:27:52
【问题描述】：

我需要使用 CSS/JavaScript 关闭自动更正功能。我无法在 HTML 中指定它，因为我一遍又一遍地生成多个输入，而这个自动更正的红色下划线对我来说非常令人不安。

我想用 CSS 或 JavaScript 应用所有这些语句，但似乎不可能。

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

有没有办法在没有自动更正下划线的情况下生成多个输入？

【问题讨论】：

我不明白你声称你不能在 html 中做到这一点，或者“这似乎是不可能的。”你试过什么？不过，供将来参考：::spelling-error 伪元素。另外，作为我对此评论的最后编辑，请分享您的minimal reproducible example 代码（在您的问题中）。
你是如何生成它们的？为什么不使用属性生成它们？你不能从 CSS 中做到这一点。
对于我搜索的内容，只有 HTML 设置它的方式。我使用 DOM 创建输入元素，并在其 for 循环中分配给每个不同的值。我试图用 innerHTML 插入它们，但后来它开始有点混乱。感谢伪元素！这就是我一直在寻找的
除了它不被任何浏览器支持:(

标签： javascript css autocorrect

【解决方案1】：

如果输入已经存在并且您无法在它们生成时设置它们的属性，那么您可以使用querySelectorAll 然后循环通过生成的节点列表来设置它们的属性，如下所示：

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 />

【讨论】：

【解决方案2】：

您可以使用 JavaScript 使用类似的东西：

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

【讨论】：

谢谢！您能否解释一下在没有自定义属性的情况下生成它们是什么意思？