HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLでテキスト入力にスペルチェッカーを追加する方法

HTMLでスペルチェッカーを追加するには、spellcheck 属性を使用します。この属性を指定すると、input 要素、textarea 要素、さらに contenteditable 属性を持つ編集可能な要素内のテキストに対して、スペルと文法のチェックが行われます。

spellcheck 属性の基本

spellcheck 属性には次の2つの値を指定できます。

  • true — スペルチェックを有効にする
  • false — スペルチェックを無効にする

注意： この属性は input 要素に対して機能しますが、パスワード入力欄（type="password"）には適用されません。

サンプルコード

以下のコードを実行すると、HTMLでスペルチェッカーを追加した実際の動作を確認できます。

<!DOCTYPE html>
<html>
   <body>
      件名： <input type="text" name="sub" spellcheck="true">
      <p>上記の入力欄に、意図的にスペルミスのある単語を入力して挙動を確認してみてください。</p>
      <p contenteditable="true" spellcheck="true">これはスペルミスを含む編集可能なテキストです。クリックして編集できます。</p>
   </body>
</html>

動作のポイント

サンプルでは、テキスト入力欄と編集可能な段落（contenteditable="true"）の両方に spellcheck="true" を指定しています。誤ったスペルの単語を入力・編集すると、ブラウザ側の辞書に基づいて赤い波線などでミスが表示されます。なお、スペルチェックの挙動や対応言語は、利用しているブラウザやOSの言語設定によって異なる場合があります。

  1. HTMLで取り消し線（打ち消し線）テキストを表示する方法【CSSでの実装手順を解説】

    HTMLで取り消し線（打ち消し線）のついたテキストを表示したい場合、かつては<strike>〜</strike>タグが使われていました。このタグは文字通り、テキストに取り消し線を引いて表示します。しかし、<strike>タグはHTML5では廃止（非推奨）されており、現在のWeb制作では使用すべきではありません。代わりに、CSSのtext-decorationプロパティを使うのが標準的な方法です。CSSのtext-decorationプロパティを使う方法CSSで取り消し線を実現するには、text-decoration: line-through;というスタイル

  2. HTMLのinput要素の幅を文字数で指定する方法【size属性の使い方】

    HTMLの<input>要素の幅を文字数を基準に指定したい場合は、size属性を使用します。size属性に数値を設定すると、その数値分の平均的な文字が表示できる幅が確保されます。 size属性の基本構文 <input type=text name=sub size=10> 上記のように記述すると、半角文字約10文字分の幅を持つテキストボックスが表示されます。size属性を省略した場合の既定値は「20」です。 使用例 次の例では、size属性とmaxlength属性を組み合わせて、表示幅と入力可能な最大文字数を同時に指定しています。 <!DOCTYPE html