HTML Living Standard/spellcheck属性

spellcheck属性

spellcheck属性は、要素内のテキストに対してスペルチェック機能を有効にするかどうかを指定するためのグローバル属性です。この属性は、特にテキスト入力が可能な要素（例: <input>, <textarea>, contenteditable属性）で使用されます。

基本構文

<element spellcheck="true|false"></element>

spellcheck="true": スペルチェックを有効にします。
spellcheck="false": スペルチェックを無効にします。
設定を省略した場合、ブラウザのデフォルト設定が適用されます。

効果

スペルミスの検出: ユーザーが入力したテキストに対してスペルミスを検出し、ハイライト表示や修正提案を行います。
言語設定の影響: スペルチェックは要素のlang属性で指定された言語に基づいて実行されます。

使用例

以下は、spellcheck属性を使用した例です。

<!-- スペルチェックを有効化 -->
<textarea spellcheck="true">This is a text area with spell check enabled.</textarea>

<!-- スペルチェックを無効化 -->
<textarea spellcheck="false">This is a text area with spell check disabled.</textarea>

contenteditableとの併用

spellcheck属性は、contenteditable属性と組み合わせて使用することができます。

<div contenteditable="true" spellcheck="true">
  You can edit this text, and spell check is enabled.
</div>

この例では、ユーザーが編集可能なテキストエリア内でスペルチェックが有効になります。

デフォルトの動作

spellcheck属性を省略した場合、ブラウザのデフォルト動作は以下のようになります。

<textarea> や <input type="text">: スペルチェックは有効。
その他の要素: スペルチェックは無効。

JavaScriptを使用した制御

JavaScriptを使用して、spellcheck属性を動的に変更できます。

<textarea id="inputField" spellcheck="true">Start typing...</textarea>
<button id="toggleSpellcheck">Toggle Spellcheck</button>

<script>
  const inputField = document.getElementById("inputField");
  const toggleButton = document.getElementById("toggleSpellcheck");

  toggleButton.addEventListener("click", () => {
    inputField.spellcheck = !inputField.spellcheck;
    alert(`Spellcheck is now ${inputField.spellcheck ? "enabled" : "disabled"}.`);
  });
</script>

この例では、ボタンをクリックすることでスペルチェックの有効化・無効化を切り替えられます。

注意点

spellcheck属性が有効でも、使用されるブラウザやプラットフォームがスペルチェック機能をサポートしていない場合は効果がありません。
スペルチェックはユーザーのブラウザ設定や言語設定にも依存します。

互換性

互換性
ブラウザ	サポート状況
Chrome	対応
Edge	対応
Firefox	対応
Safari	対応
Opera	対応

参考文献