iPentec.com / Document / カテゴリ: HTML / タグ: HTML HTMLタグ

複数行テキストボックス (テキストエリア / textarea) でスペルチェックのアラート表示を無効にする

概要

HTMLフォームの複数行テキストボックス(textareaタグ)で編集時にスペルチェックのアラート表示(赤の波線など)が表示され、見づらい場合があります。テキストエリアのスペルチェックのアラートを表示を無効にするHTMLコードを紹介します。

参考

フォーム全体のテキストボックスコントロールに対してスペルチェックを無効にする場合はこちらの記事を参照してください。

書式

スペルチェックを無効にする場合は、spellcheck 属性を記述し、値をfalseに指定します。

動作の確認

下記のHTMLを作成します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
  <form action="example.ashx"> 
    テキストエリアです。<br/>
    <textarea cols="80" rows="20"></textarea><br/>
    <input type="submit" value="送信"/>
  </form>
</body>
</html>

上記のHTMLファイルをスペルチェック機能のあるWebブラウザ(Chromeなど)で表示します。下図の画面が表示されます。
複数行テキストボックス (テキストエリア / textarea) でスペルチェックのアラート表示を無効にする:画像1

テキストエリアに文字を入力します。スペルチェックが動作し、問題のあるスペルに赤の波線が表示されます。スペルの間違いがわかるのは良いのですが、テキストエリアが見にくくなってしまいます。
複数行テキストボックス (テキストエリア / textarea) でスペルチェックのアラート表示を無効にする:画像2

実装例

spellcheck="false" を指定して動作を確認します。

コード

下記のHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
  <form action="example.ashx"> 
    テキストエリアです。<br/>
    <textarea cols="80" rows="20" spellcheck="false"></textarea><br/>
    <input type="submit" value="送信"/>
  </form>
</body>
</html>

表示結果

上記のHTMLファイルをスペルチェック機能のあるWebブラウザ(Chromeなど)で表示します。下図の画面が表示されます。
複数行テキストボックス (テキストエリア / textarea) でスペルチェックのアラート表示を無効にする:画像3

テキストエリアに文字を入力します。スペルチェックが無効になるため、赤の波線は表示されません。