HTML spellcheck 拼写检查

spellcheck属性控制浏览器拼写检查：spellcheck=true/false应用于input/textarea/contenteditable、lang属性影响拼写检查语言、与CSS ::spelling-error伪元素样式拼写错误 · 难度：入门 · +10XP

HTML spellcheck —— 拼写检查控制

浏览器默认对输入框做拼写检查——拼错的英文单词下面出现红色波浪线。spellcheck属性让你控制这个行为。

基本用法

<textarea spellcheck="true">Helo World</textarea>  <!-- 开启 -->
<textarea spellcheck="false">myemail@example.com</textarea> <!-- 关闭 -->

邮箱、用户名、代码片段这些内容不应该做拼写检查，设spellcheck="false"。

CSS样式拼写错误

::spelling-error { text-decoration: wavy underline red; }
::grammar-error { text-decoration: wavy underline green; }

动手练习

1. 基础练习：做textarea分别测试spellcheck=true/false的效果。
2. 进阶应用：做英文作文检查器——textarea开启拼写检查，统计错误单词数量。
3. 项目实战：在代码编辑器项目中确保代码区域spellcheck="false"，注释区域允许检查。