必须禁用原生拼写检查并使用textarea作为载体，配合spellcheck="false" autocorrect="off" autocapitalize="none" inputmode="verbatim"四属性组合，中英文分治处理、防抖缓存、手动高亮渲染。
spellcheck="false" 是调用第三方纠错 API 的前提
浏览器原生 spellcheck 和第三方文本纠错（如 LanguageTool、百度 AI 拼写纠错）是互斥机制。只要 spellcheck="true" 生效，浏览器就会在输入框里画红色波浪线、右键弹“更正为…”菜单——这会干扰你自定义的高亮样式和纠错逻辑，甚至导致用户误点系统建议覆盖你的 JS 结果。
所以第一步必须彻底禁用原生拼写提示，但光写 spellcheck="false" 远不够：
- iOS Safari 下，
autocorrect="off"会压制 spellcheck，导致spellcheck="false"形同虚设 - macOS 系统级设置「键盘 → 文本输入 → 在网页文本框中检查拼写」若开启，所有 spellcheck 都会被绕过
- 移动端软键盘行为完全独立于 HTML 属性，
inputmode="verbatim"才能阻止键盘自动修正
真正生效的组合是：spellcheck="false" autocorrect="off" autocapitalize="none" inputmode="verbatim"。缺一不可，否则你在 Chrome 里看到的“无波浪线”，到了 iOS 上可能全恢复。
textarea 是唯一值得绑定第三方纠错的载体
别在 contenteditable 区域或 input[type="text"] 上折腾第三方纠错。前者行为不可控（Safari 常无视 spellcheck，右键仍弹菜单），后者对 spellcheck 支持极弱——input[type="email"]、input[type="url"] 基本不响应，input[type="password"] 更是在 DOM 解析时就被静默丢弃属性。
textarea 是目前唯一稳定、可预测、全平台一致的可编辑容器：
- 它天然支持
spellcheck属性，且所有主流浏览器都按规范解析 - 它的 value 是纯字符串，无需处理 contenteditable 的 DOM 树遍历或光标位置还原
- 第三方 API 返回的错误位置（字符偏移量）可以直接映射到
textarea.value，高亮插入<mark class="spell-error"></mark>也只需用setRangeText或 DOM 替换
如果你用的是 Monaco/CodeMirror，得穿透到它内部那个隐藏的 textarea（Monaco 中常是 class="monaco-editor-background" 下的元素；CodeMirror 6 中是 role="textbox" 的节点），然后对其设置上述四件套——不是对外层容器操作。
中英文混排必须分治处理，不能依赖 lang 属性
lang="zh" 或 lang="en" 对 spellcheck 无效，浏览器根本不读取它来切换词典。更关键的是：第三方纠错 API 也几乎从不基于 lang 自动路由。LanguageTool 默认只查英文；百度 AI 拼写纠错只认中文输入。
所以你要手动切片：
- 用
/[a-zA-Z]+/g提取所有英文单词，送 LanguageTool 或 bloom-filters-spellchecker - 用
/[\u4e00-\u9fa5]+/g提取中文词块，走百度 AI、腾讯文智或 PaddleNLP - 中英夹杂如
"const foo = '你好';"，需先按语言边界切分，再分别校验——不能整段扔给一个 API
注意性能陷阱：每次 input 都触发全量正则 + API 请求会卡顿。必须加防抖（debounce ≥ 300ms）+ 缓存（比如对相同英文单词连续三次请求返回相同结果，就本地缓存 5 秒）。
高亮渲染必须绕开浏览器波浪线，用 mark 标签手动注入
第三方纠错的结果无法驱动浏览器画波浪线——那功能只属于原生 spellcheck 引擎。你拿到 API 返回的错误位置（start、end 字符索引）后，要自己做 DOM 操作：
- 对
textarea，没法直接插<mark></mark>，得用document.execCommand('insertHTML', false, ...)（已废弃但尚可用）或更稳妥的方案：创建浮动 tooltip + 绝对定位下划线（通过getBoundingClientRect()计算光标位置） - 对
contenteditable，可安全插入<mark class="spell-error">recieve</mark>，但要注意：替换后必须重置光标位置，否则用户继续打字会跳到开头 - CSS 必须显式定义
.spell-error { text-decoration: wavy red underline; }，别指望继承或默认样式
最易被忽略的一点：API 返回的 offset 是基于原始字符串的，但如果你做了防抖、节流或异步等待，用户可能已在期间修改了内容——必须用时间戳或版本号比对，避免把旧结果错标到新文本上。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
