是否可为HTML textarea添加自定义拼写检查标记无效输入？

结论先行：你没法直接给textarea（包括bootstrap-vue封装的b-form-textarea）挂载自定义拼写检查函数复用原生红色波浪线。
浏览器原生拼写检查的规则完全依赖内置词典和系统拼写服务，没有对外暴露自定义校验规则的注入接口，没有官方途径可以把你自己的汽车制造商校验逻辑塞到原生拼写检查流程里。

下面是按实现成本和还原度排序的可行方案： #

方案1：透明覆盖层模拟原生波浪线（还原度最高，优先选） #

这个方案能做到和原生拼写检查视觉1:1一致，也不用改你现有的textarea输入交互，适配你最多1000条输入的性能要求：

• 保留你已经写好的state整体校验逻辑，在textarea同层级加一个和它尺寸、内边距、字体、行高、换行规则完全一致的div层，设置pointer-events: none让它不阻挡输入操作，叠在textarea上方，背景设为透明。
• 给输入事件加300ms防抖，每次触发时把输入文本按逗号拆分，和你维护的有效制造商名单做匹配，记录所有无效片段（比如示例里的Harley Davidson）在整段文本中的起始、结束位置。
• 在覆盖层里渲染和textarea完全一致的文本，给匹配到的无效片段套上span标签，加如下CSS就能得到和原生一模一样的红色波浪线：

.invalid-entry {
  text-decoration: underline wavy #ff0000;
  text-underline-offset: 2px;
}

• 踩坑提示：一定要把覆盖层和textarea的字体属性、padding、box-sizing、word-break规则设成完全一致，不然波浪线位置会偏移。千条量级的文本匹配和渲染性能完全没问题，不会出现输入卡顿。

方案2：contenteditable可编辑div替换textarea（适配成本低） #

如果不想写文本位置计算逻辑，可以直接把b-form-textarea换成设置了contenteditable="true"的普通div：

• 每次输入后做文本校验，直接把匹配到的无效条目包裹在带上述.invalid-entry样式的标签里即可，不需要额外计算位置。
• 额外需要处理的点：要自己做光标位置维护、粘贴内容的格式清洗，同时把纯文本内容同步到隐藏字段用于表单提交，开发量比方案1稍大，但不会出现位置错位的问题。

方案3：标签输入组件改造（交互最清晰） #

如果可以接受调整输入交互，直接换成标签输入类组件，用户每输入一个制造商按逗号就生成一个独立标签，校验不通过的标签直接加红色波浪线样式。这种方式用户能更直观定位错误项，也不需要处理文本位置计算，缺点是和纯文本域的连续输入体验有差异。

不推荐尝试hack浏览器原生拼写检查接口：Chrome、Firefox、Safari的拼写检查底层实现完全不统一，hack方案兼容性极差，后续浏览器版本更新很容易失效，维护成本极高。

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