PHP小码农

Appearance

spellcheck 拼写检查 ​

spellcheck 全局属性控制浏览器是否对元素内容进行拼写和语法检查。它对 <input>、<textarea> 和 contenteditable 元素有效。

前置知识

阅读本节前，建议先了解：contenteditable 可编辑

基础概念 ​

spellcheck 的值 ​

值说明适用场景
true启用检查（默认）文本输入、评论、邮件
false禁用检查用户名、代码、URL、特殊文本

基本用法 ​

html
<!-- 启用拼写检查（默认行为） -->
<textarea spellcheck="true" placeholder="输入你的评论..."></textarea>

<!-- 禁用拼写检查 -->
<input type="text" spellcheck="false" placeholder="用户名">
<textarea spellcheck="false" placeholder="输入代码..."></textarea>

<!-- 对 contenteditable 生效 -->
<div contenteditable="true" spellcheck="true">编辑并检查拼写</div>
<div contenteditable="true" spellcheck="false">编辑但不检查拼写</div>

语法与使用 ​

不同元素上的效果 ​

html
<form>
  <!-- 评论区：启用 -->
  <div>
    <label for="comment">评论</label>
    <textarea id="comment" spellcheck="true"></textarea>
  </div>

  <!-- 用户名：禁用 -->
  <div>
    <label for="username">用户名</label>
    <input type="text" id="username" spellcheck="false">
  </div>

  <!-- 邮箱：启用 -->
  <div>
    <label for="email">邮箱</label>
    <input type="email" id="email" spellcheck="true">
  </div>

  <!-- 搜索：通常禁用 -->
  <div>
    <label for="search">搜索</label>
    <input type="search" id="search" spellcheck="false">
  </div>
</form>

JavaScript 控制 ​

javascript
const input = document.getElementById("editor");
// 读取 spellcheck 状态
console.log(input.spellcheck); // "true" | "false"
// 修改 spellcheck
input.spellcheck = "false";

详细说明 ​

spellcheck 与 lang 的配合 ​

spellcheck 的效果受 lang 属性影响。浏览器会根据语言选择对应的拼写检查字典：

html
<!-- 中文输入：中文没有拼写检查 -->
<textarea lang="zh-CN" spellcheck="true" placeholder="中文内容"></textarea>

<!-- 英文输入：浏览器会检查英文拼写 -->
<textarea lang="en" spellcheck="true" placeholder="Type English..."></textarea>

<!-- 混合语言 -->
<div contenteditable="true" lang="zh-CN" spellcheck="true">
  <p>中文内容不会被检查拼写。</p>
  <p lang="en">English content willl bee cheked.</p>
</div>

哪些元素支持 spellcheck ​

元素支持说明
<textarea>是默认启用
<input type="text">是默认启用
<input type="search">是通常应禁用
<input type="email">是默认启用
<input type="password">是通常禁用
contenteditable是取决于属性设置
<div>否不生效

实战示例 ​

评论区与代码编辑器 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>spellcheck 示例</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: -apple-system, sans-serif; padding: 2rem; }
    .form-group { margin-bottom: 1.5rem; }
    .form-group label { display: block; font-weight: 500; margin-bottom: 0.25rem; }
    .form-group input, .form-group textarea {
      width: 100%; padding: 0.6rem 0.75rem;
      border: 1px solid #d1d5db; border-radius: 6px;
      font-size: 0.95rem; outline: none;
    }
    .form-group input:focus, .form-group textarea:focus { border-color: #3b82f6; }
    .form-group textarea { min-height: 100px; resize: vertical; }
    .hint { font-size: 0.8rem; color: #64748b; margin-top: 0.25rem; }
  </style>
</head>
<body>
  <h1>spellcheck 属性示例</h1>
  <div class="form-group">
    <label for="comment">发表评论（启用拼写检查）</label>
    <textarea id="comment" spellcheck="true" placeholder="输入评论..."></textarea>
    <p class="hint">浏览器会在拼写错误下方显示红色波浪线。</p>
  </div>
  <div class="form-group">
    <label for="code">代码片段（禁用拼写检查）</label>
    <textarea id="code" spellcheck="false" style="font-family:monospace" placeholder="输入代码..."></textarea>
    <p class="hint">代码输入不检查拼写，避免变量名被标记为错误。</p>
  </div>
  <div class="form-group">
    <label for="username">用户名（禁用拼写检查）</label>
    <input type="text" id="username" spellcheck="false" placeholder="输入用户名">
    <p class="hint">用户名可能是非标准拼写，不检查。</p>
  </div>
</body>
</html>

注意事项 ​

  1. 中文不适用：中文没有拼写检查，spellcheck 对中文内容无效果
  2. 浏览器差异：不同浏览器的拼写检查行为和提示方式不同
  3. 性能影响：长文本中拼写检查可能影响输入性能
  4. 密码字段：密码输入框应禁用 spellcheck

最佳实践 ​

  1. 代码输入禁用：代码编辑器应设置 spellcheck="false"
  2. 用户名禁用：用户名可能是非标准拼写
  3. 评论启用：评论区域默认启用拼写检查
  4. 搜索禁用：搜索框通常禁用拼写检查
  5. 配合 lang 使用：多语言页面正确设置 lang 属性

下一节

继续学习：data-* 自定义数据属性

参考链接 ​