HTML - 拼写检查属性



HTML 的 **spellcheck 属性** 指定浏览器是否应检查可编辑元素中文本的拼写。

在 HTML 中,包括文本输入字段和 contenteditable 元素在内的多个元素可以应用 **spellcheck** 全局属性。它调节浏览器自动拼写检查功能的行为,启用或禁用它,并为元素内的文本更正提供建议。

此属性可以设置为 true 以启用它,设置为 false 以关闭它,或者不指定以让浏览器决定默认情况下该怎么做。通过确保用户生成的信息正确编写,从而提升用户体验。

语法

<tag contenteditable spellcheck="true | false">

应用于

由于 spellcheck 是 HTML 中的全局属性,因此所有可以包含文本的标签都支持 spellcheck 属性。

HTML spellcheck 属性示例

以下示例将说明 HTML spellcheck 属性,以及我们应该在哪里以及如何使用此属性!

段落元素的拼写检查

在以下示例中,我们创建一个 HTML 文档并使用 spellcheck 属性来确定是否可以检查元素的拼写错误。

<!DOCTYPE html>
<html>
<head>
    <style>
    p {
        padding: 2px;
    }
    </style>
</head>
<body>
   <h3>HTML spellcheck Attribute</h3>
   <strong>Spellcheck is active</strong>
   <p contenteditable spellcheck="true">
      This exampull will be checked fur spellung 
      when you try to edit it.
   </p>
   <strong>Spellcheck is deactivate</strong>
   <p contenteditable spellcheck="false">
      This exampull will nut be checked fur spellung
      when you try to edit it.
   </p>
</body>
</html>

输入元素的拼写检查

让我们来看下面的例子,我们创建一个表单并在输入字段中启用 spellcheck。如果拼写不正确,它将用红线进行下划线。

<!DOCTYPE html>
<html>

<body>
   <h3>HTML spellcheck Attribute</h3>
   <form>
      <p>
      <input type="text" spellcheck="true"
             placeholder="Enter your name">
      </p>
      <p>
      <input type="email" spellcheck="true" 
             placeholder="Enter your email">
      </p>
      <p>
      <textarea spellcheck="true" 
                placeholder="comments">
      </textarea>
      </p>
      <button type="reset">Reset</button>
   </form>
</body>

</html>

支持的浏览器

属性 Chrome Edge Firefox Safari Opera
spellcheck 9.0 10.0 2.0 5.1 10.5
html_attributes_reference.htm
广告