SYNCERのロゴ
アイキャッチ画像

spellcheck属性 - スペルチェック

spellcheck属性は、要素の入力内容をスペルチェックするべきか否か、ユーザーエージェントにヒントを与えるための属性です。

概要

DOM Interface
HTMLElement.spellcheck
仕様書
https://html.spec.whatwg.org/multipage/interaction.html#attr-spellcheck

下記のキーワードから値を指定します。

true
スペルチェックを有効にする。
false
スペルチェックを無効にする。
欠損値、空文字
trueと同じ扱い。

説明

スペルチェックをするか否か、下記の通り制御できます。

<!-- スペルチェックが有効 -->
<textarea spellcheck="true"><textarea>
<textarea spellcheck><textarea>

<!-- スペルチェックが無効 -->
<textarea spellcheck="false"><textarea>

一部のブラウザでは、要素の言語が日本語だとスペルチェックが有効になりません。とにかくスペルチェックを有効にしたい、という場合はlang属性で言語を英語にしてみて下さい。

<textarea spellcheck="true" lang="en-US">appple<textarea>

デモ

spellcheck属性を取得するデモです。フォーカスした時にスペルチェックで赤線が引かれるか確認して下さい。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
<style>
	textarea { width: 40% ; font-size: 16px ; }
</style>
</head>
<body>
<p><textarea id="hoge" rows="2" spellcheck="true">appple</textarea></p>
<p><textarea id="hoge" rows="2" spellcheck>appple</textarea></p>
<p><textarea id="hoge" rows="2" spellcheck="false">appple</textarea></p>
</body>
</html>

サポート状況

クリックすると、バージョンごとの対応状況を確認できます。

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
5.1+ 10+ 4.0+
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月3日 (火)
コンテンツを公開しました。