テキストエリアに入力された文字数をカウントしてリアルタイムに表示する

JavaScriptを使うと、テキストエリアなどの文字列入力フォーム上でユーザが入力した文字数をカウントすることが簡単にできます。それを活用すると、テキストエディタのように「現在の入力文字数」をリアルタイムに表示することもできます。
例えば、以下のようにテキスト入力欄の真下にカウント結果をリアルタイムに表示できます。

上記の入力欄(textarea要素で作った入力フォーム)に何か適当な文字列を入力してみて下さい。すると、入力した瞬間にテキストエリアの下部に「xxx文字」のように文字数が表示されるはずです。
こんな感じで、簡単に文字数のカウントと表示が可能です。
ほぼ入力した瞬間に文字数がカウントされて表示されます。漢字変換中や同じキーを押しっぱなしにしている場合だとカウントされませんけども。

文字数カウンタ付きテキストフォームを作るHTML＋JavaScriptソース

上記のような「文字数カウンタ付きテキストエリア」を作るには、以下のようにHTML＋JavaScriptソースを記述します。
まずは、HTMLソース。

<textarea cols="24" rows="3" onkeyup="ShowLength(value);"></textarea>
<p id="inputlength">0文字</p>

textarea要素で複数行の入力欄を作っています。textarea要素でなくても、input要素で1行入力欄を作っても構いません。ここでのポイントはonkeyup属性を使っている点です。onkeyupイベントを使えば「キーボードのキーが一旦押されてから離された(上がった)とき」に処理を実行できます。つまり、「何か文字が入力された直後(もしくは消された直後)」に処理ができます。

onkeyupイベントで呼び出している「ShowLength」という関数は、文字数をカウントする関数としてこの後で作ります。なお、引数にvalueという値を渡していますが、これはその入力欄に入力されたテキスト(全部)です。文字数をカウントするために渡しています。テキスト全部を渡すのは無駄な気もしますが、まあ、テキストエリアにそんな巨大なデータを書かれることはないだろう、という前提で丸ごと渡しています。(^_^;)

最後に、デフォルトでは「0文字」と表示されているp要素を用意しています。ここに、文字数のカウント結果を出力します。JavaScriptで内容を変更させるため、id属性を使ってid名「inputlength」を付けています。

さて、次に本題の文字数カウントJavaScriptソースです。とはいえ、ソースは非常に短いです。

function ShowLength( str ) {
   document.getElementById("inputlength").innerHTML = str.length + "文字";
}

上記では、先ほどのonkeyupイベントで呼び出される「ShowLength」関数を作っています。
処理内容は非常に簡単で、引数で渡された値の長さ(length)を数えて、「inputlength」というidの振られている要素に書き出しているだけです。
引数は変数strに格納されています。str.lengthのようにlengthプロパティを参照することでその文字数が得られます。あとは、getElementByIdメソッドで出力位置を特定して、innerHTMLプロパティを使って、要素の内容を書き換えています。
以上で、テキストエディタのステータスバーなどのように、「入力された文字列の数をカウントして表示」する機能ができあがります。
とても単純で簡単ですね。

複数の入力欄の文字数を個別にカウントしてリアルタイムに表示する

先の例では、テキストエリアも文字数表示要素も1つずつでした。テキストエリアを複数個掲載する場合に、文字数をカウントする関数も複数用意するのは無駄が多い気がします。
というわけで、文字数をカウントしたいテキストエリアが複数ある場合でも、用意するJavaScriptは1つで済むようにしてみます。
動作例は以下の通りです。複数あるテキスト入力欄のどれに入力しても、その下にリアルタイムに文字数カウント結果が表示されます。

上記には、3つのテキストエリア(複数行の入力が可能な入力フォーム)と1つのテキスト入力欄(1行だけの入力が可能な入力フォーム)があります。
どれに文字を入力しても、その真下にある表示欄に文字数がカウントされて表示されます。

少し汎用的な文字数カウンタを作るJavaScriptソース

上記のように、文字数をカウントしたい入力欄が複数ある場合は、以下のように若干汎用的にしたJavaScriptソースを書いておけば、入力欄の個数に関係なくJavaScriptソースは1つだけで済みます。

function ShowLength( str, resultid ) {
   document.getElementById(resultid).innerHTML = str.length + "文字";
}

特に難しいことはなにもしていません。ShowLength関数の引数を2つにしただけです。1つ目の引数strは先程と同じように「入力されたテキスト全文」です。この文字数をカウントします。次に2つ目の引数resultidは、文字数のカウント結果を表示する対象の要素に付加したid名です。
このように記述すれば、文字数カウント結果の表示領域を固定せずに済むので、入力欄が複数個ある場合でもJavaScriptソースは1つで済みます。

例えば、HTMLソースは以下のように記述します。

<textarea cols="24" rows="3" onkeyup="ShowLength(value,inputlength1);"></textarea>
<p id="inputlength1">0文字</p>
<textarea cols="24" rows="3" onkeyup="ShowLength(value,inputlength2);"></textarea>
<p id="inputlength2">0文字</p>

上記では、textarea要素を使ってテキストエリアを2つ作っています。1つ目の文字数カウント結果はid="inputlength1"のp要素に表示され、2つ目の文字数カウント結果はid="inputlength2"のp要素に表示されます。

というわけで、リアルタイムに文字数をカウントして表示するテキスト入力欄の作り方でした。

備考

なお、HTML側にonkeyup属性を付加するのではなく、HTML側ではid名を付加しておくだけにして、JavaScriptソース側で全てを完結させてしまいたい場合は下記のように書けます。

document.getElementById('targetTextArea').onkeyup = function(){ /* 文字数カウント処理など*/ };

上記は、文字数カウント対象のテキストエリアに、id="targetTextArea"のようにid名が付加してある場合の例です。
まあ、どうせHTML側には文字数カウント結果の表示領域を用意する必要があるわけで、完全にHTMLとJavaScriptを分離できるわけではありませんから、onkeyup属性を使っておくので何も問題ないのではないかとも思います。(^_^;)

(更新日：2017年06月06日)