spellcheck属性仅对可编辑元素生效：①textarea；②input[type="text"/"search"]；③contenteditable="true"的元素（如div、p）；不可编辑元素（如普通div、p、span）即使设置也无效。
spellcheck属性在哪些HTML元素上真正生效
不是所有元素加了 spellcheck 就会触发浏览器拼写检查。它只对可编辑内容起作用：即带有 contenteditable="true" 的元素，或原生表单控件如 <input>、<textarea>。给 <div> 或 <p> 直接加 spellcheck="true" 但没设 contenteditable，等于没写。
常见误区是以为给整个页面加个 <body spellcheck="true"> 就能全局检查——实际上只有其中可编辑的子元素才响应。
-
<input type="text">、<input type="search">、<textarea>默认继承 body 的 spellcheck 值，但显式设置更可靠 -
<div contenteditable="true" spellcheck="true">是富文本场景的常用组合 -
<span>、<ul>、<table>等非编辑容器即使加了 spellcheck 也无效果
spellcheck="true" vs spellcheck="false" vs 不设置的区别
这个属性是三态的：true、false、未声明（即空值或缺失）。浏览器行为有细微差别：
- 未声明时，元素按父级继承值；
<body>未声明则由浏览器默认策略决定（Chrome 默认开启，Firefox 需用户手动启用字典） -
spellcheck="true"强制启用，但前提是该元素支持编辑且用户系统已安装对应语言词典 -
spellcheck="false"明确禁用，连右键“拼写建议”菜单都会隐藏
注意：iOS Safari 对 spellcheck 支持极弱，即使设为 true 也可能完全不显示下划线提示；Android Chrome 则相对稳定。
立即学习“前端免费学习笔记（深入）”；
如何验证 spellcheck 是否实际生效
不能只看代码写了没，得观察真实反馈：
- 在支持的浏览器中输入明显错词（如 “recieve”），应看到红色波浪线下划线
- 右键点击错词，菜单中应出现“建议拼写”或类似选项（不同语言/系统文案不同）
- 若没反应，先检查控制台是否报错（一般不会），再确认：元素是否可编辑？是否被
user-select: none或pointer-events: none干扰？CSS 是否覆盖了下划线样式（如text-decoration: none）？
一个快速测试片段：
<textarea spellcheck="true">typo recieve</textarea>
在 Chrome 桌面版中输入后，第一个词无波浪线（正确），第二个会有红色下划线。
兼容性与用户环境依赖的关键点
spellcheck 是 HTML5 标准属性，现代浏览器都支持，但实际体验严重依赖外部条件：
- 操作系统需安装对应语言的拼写检查引擎（Windows 10/11 默认带英语，中文无拼写检查意义）
- 浏览器必须启用该功能：Chrome 地址栏输入
chrome://settings/languages→ 确保“拼写检查”开关打开；Firefox 在about:preferences#language中检查“检查拼写”复选框 - 某些企业环境或浏览器策略（如 Chrome Enterprise Policy）可能强制禁用 spellcheck
最常被忽略的一点：拼写检查只对标记为当前活动语言的内容生效。如果页面 <html lang="zh-CN">，但用户只装了英文词典，那 spellcheck="true" 也几乎不触发任何提示。
