【ホームページ作成】テキスト入力欄の文字数をリアルタイム表示

入力された文字数を表示する

テキストエディタの中には、現在の入力文字数をステータスバーなどにリアルタイムに表示してくれるものがあります。 JavaScriptを使うと、ウェブ上の入力フォームでも、ユーザが入力した文字数をカウントして表示することが簡単にできます。

下記の入力欄に何か文字列を入力してみて下さい。入力欄の右下に、入力文字数がリアルタイムに表示されます。
※JavaScriptが利用可能な環境でのみ

全角文字でも半角文字でも、1文字は1文字としてカウントされます。
※改行は、1文字（または2文字）としてカウントされます。
※古いブラウザでは、全角文字1つを2文字としてカウントする場合があります。

また、指定の文字数からカウントダウンさせることもできます。 下記の入力欄に何か文字列を入力してみて下さい。入力欄の右下に、入力可能な残り文字数がリアルタイムに表示されます。

※上側の複数行入力欄では、実際には100文字を超えても入力可能です。その場合、残数はマイナスで表示されます。 （textarea要素には最大入力文字数を指定するmaxlengthのような属性がないため）

今回は、このような「文字数をカウントできる入力欄」を作る方法をご紹介いたします。

【目次】

• 1-1. フォームや表示領域をHTMLで作る
• 1-2. カウントして表示するJavaScriptを書く
• 2-1. カウントダウン表示用のHTMLを書く
• 2-2. カウントダウンして表示するJavaScriptを書く
• 3. ソースのまとめと、スタイルシートでの装飾