[高效]使用HTML5 Spellcheck 属性实现拼写检查
2021-05-12 本文已影响0人
陈小留
最近有一个新的需求需要对文本框的英文单词实现拼写检查，这个功能相信大家基本都见过，例如在写邮件或者写文章的时候不小心敲错了一个英文单词，错误的单词会出现红色下划线提示你这个单词可能是有问题的，当你把错误单词修改正确之后，红色下划线不见了。
这个小功能其实是很好实现的，直接使用现成的HTML5 全局属性Spellcheck即可，下面是演示：
1. 定义和用法
spellcheck 属性规定是否对元素内容进行拼写检查。
可对以下文本进行拼写检查：
类型为 text 的 input 元素中的值（非密码）
textarea 元素中的值
可编辑元素中的值
2. 实例
3. 代码
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>spellcheck属性的使用</title></head><body> <p>检测<textarea spellcheck="true">absolute testK</textarea> </p> <p>不检测 <textarea spellcheck="false"></textarea> </p> <div contenteditable="true" spellcheck class="ac">div absolute testK</div> </body></html>
4. 注意点：
Chrome 浏览器需要把Spell Check 功能打开
