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

Posted 2023-05-07

【中文标题】使用 CSS 或 JavaScript 关闭输入的自动更正

【英文标题】：Turn off autocorrect of input using CSS or 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 插入它们，但后来它开始有点混乱。感谢伪元素！这就是我一直在寻找的

除了它不被任何浏览器支持:(

【参考方案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');

【讨论】：

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