如何用JavaScript关闭iOS网页编辑模式下的拼写检查功能？

以下几种方案可以尝试，解决iOS Safari中开启网页编辑后出现的拼写错误红色标记问题：

方案一：批量处理所有可编辑元素 #

如果你的编辑模式是针对多个元素开启的，用这段代码全局禁用拼写检查并隐藏默认下划线：

// 遍历所有可编辑元素、输入框、文本域，禁用拼写检查
document.querySelectorAll('[contenteditable="true"], input, textarea').forEach(element => {
  element.spellcheck = false;
  // 强制覆盖浏览器默认的拼写错误下划线样式
  element.style.setProperty('-webkit-text-decoration', 'none !important');
  element.style.setProperty('text-decoration', 'none !important');
});

// 给文档根元素设置全局禁用，覆盖动态生成的元素
document.documentElement.spellcheck = false;

方案二：针对全页编辑场景优化 #

如果你是通过开启整个body的可编辑模式实现的，直接给body和根元素设置：

// 开启全页编辑
document.body.contentEditable = true;
// 禁用拼写检查
document.body.spellcheck = false;
document.documentElement.spellcheck = false;
// 清除iOS Safari的拼写错误下划线
document.body.style.webkitTextDecorationLine = 'none';
document.body.style.textDecorationLine = 'none';

补充说明 #

单独设置spellcheck="false"无效，大概率是因为：

• 浏览器默认样式优先级更高，需要用CSS强制覆盖下划线
• 页面中存在动态生成的可编辑元素，未被批量处理到
• iOS Safari对contenteditable元素的拼写检查有特殊处理，需要同时设置根元素和目标元素的spellcheck属性

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