Presented by Nishishi via Movable Type. Last Updated: 2016/10/14. 13:32:50.

テキスト入力フォームで文字数を表示する

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

例えば、以下のように。

▼何か入力してみて下さい。文字数がカウントされて枠の下部に表示されます。

0文字

上記の入力欄(テキストエリア)に、何か適当な文字列を入力してみて下さい。すると、入力した瞬間に、テキストエリアの下部に「xxx文字」と文字数が表示されるはずです。
こんな感じで、簡単に文字数のカウントと表示が可能です。

この「文字数カウンタ付きテキストフォーム」を作るには、以下のようにソースを記述します。

まずは、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ソースです。

<script type="text/javascript"><!--
   function ShowLength( str ) {
      document.getElementById("inputlength").innerHTML = str.length + "文字";
   }
// --></script>

上記では、先ほどのonkeyupイベントハンドラで呼び出される「ShowLength」関数を作っています。
処理内容は非常に簡単で、引数で渡された値の長さ(length)を数えて、「inputlength」というidの振られている要素に書き出しているだけです。

引数は変数strに格納されています。「str.length」のようにlengthプロパティを参照することでその文字数が得られます。あとは、getElementByIdメソッドで出力位置を特定して、innerHTMLプロパティを使って、要素の内容を書き換えています。

以上で、テキストエディタのステータスバーなどのように、「入力された文字列の数をカウントして表示」する機能ができあがります。

JavaScript TIPS 主要なカテゴリ

現在、以下のカテゴリに区分してTIPSを公開しています。

  • イベント : JavaScriptを実行するトリガーとなるイベントに関するTIPS
  • 入力フォーム : JavaScriptで入力フォームを扱う方法に関するTIPS
  • 情報取得 : JavaScriptで様々な情報を得る方法に関するTIPS
  • 操作・移動 : JavaScriptでブラウザを操作したり表示ページを移動したりする方法に関するTIPS
  • 日付・時刻 : JavaScriptで日付や時刻を扱う方法に関するTIPS
  • 機能 : JavaScriptで何らかの機能を実現する方法に関するTIPS
  • 装飾・内容変更 : JavaScriptで装飾や内容を変更する方法に関するTIPS
  • 計算・変換 : JavaScriptで様々な計算や変換処理を行う方法に関するTIPS

▲各カテゴリ毎に、TIPSのタイトルと概要を一覧できます。ぜひ、いろいろ覗いてみて下さい!

関連書籍・関連ソフトなど