如何为网站所有控件全局关闭spellcheck功能？

以下几种方法可以实现全站批量关闭拼写检查，不用逐个控件设置属性：

1. 利用HTML属性继承（最简单方案） #

spellcheck属性支持继承，直接在根元素<html>或<body>上设置spellcheck="false"，所有子元素会自动继承这个设置，覆盖默认开启拼写检查的控件（如input、textarea、contenteditable元素）：

<html spellcheck="false">
<!-- 页面内容 -->
</html>

如果只需要针对页面主体内容生效，也可以给<body>标签设置：

<body spellcheck="false">
<!-- 页面内容 -->
</body>

注意：如果个别控件需要保留拼写检查，只需单独给该控件设置spellcheck="true"即可，显式设置会覆盖继承值。

2. JavaScript批量设置 #

如果不想修改根元素的HTML属性，可以用JS遍历所有目标控件，批量设置spellcheck属性：

// 选中所有表单输入控件和可编辑元素
const elements = document.querySelectorAll('input, textarea, [contenteditable="true"]');
elements.forEach(element => {
  element.spellcheck = false;
});

把这段代码放在页面加载完成的事件里，确保所有元素都已渲染后执行：

document.addEventListener('DOMContentLoaded', function() {
  const elements = document.querySelectorAll('input, textarea, [contenteditable="true"]');
  elements.forEach(element => {
    element.spellcheck = false;
  });
});

3. 框架项目全局处理（Vue/React等） #

如果是使用前端框架开发，可以通过全局指令或基类组件实现：

• Vue：注册全局指令，自动给所有匹配元素关闭拼写检查

// main.js中注册全局指令
Vue.directive('disable-spellcheck', {
  inserted(el) {
    el.spellcheck = false;
  }
});

之后在组件中使用，或者直接在根组件的mounted钩子中执行上面的批量JS代码。

• React：可以封装一个基础输入组件，默认关闭拼写检查，所有业务组件继承该基础组件；或者在全局入口文件中执行批量设置的JS代码。

内容的提问来源于stack exchange，提问作者wonderful world