6/6 テキスト入力欄の文字数をリアルタイム表示 [ホームページ作成] All About

3-1. ソースのまとめ

ソースのまとめです。（文字数をそのまま表示する方法と、指定数からカウントダウンする方法とを別々に掲載していますが、同一ページ内で両方同時に使用可能です。）

●文字数をそのまま表示（カウントアップ）するソース：

<script type="text/javascript"><!--

function ShowLength( idn, str ) {

   document.getElementById(idn).innerHTML = str.length + "文字";

}

// --></script>

<form class="sampleform">

   <textarea cols="24" rows="3" onkeyup="ShowLength('inputlength1', value);"></textarea>

   <p id="inputlength1">0文字</p>

   <input type="text" onkeyup="ShowLength('inputlength2', value);">

   <p id="inputlength2">0文字</p>

</form>

※複数行入力欄（textarea要素）と、1行入力欄（input要素）の両方を並べて掲載しています。
※あとから装飾するために、form要素にclass属性を使って「sampleform」というクラス名を付加しています。
※入力欄を同一ページ内に複数回使う場合は、それぞれID名を重複しないように修正するのを忘れないで下さい。（上記では、inputlength1 と inputlength2 というID名を指定しています。）

●指定文字数から残り文字数を表示（カウントダウン）するソース：

<script type="text/javascript"><!--

function CountDownLength( idn, str, mnum ) {

   document.getElementById(idn).innerHTML = "あと" + (mnum - str.length) + "文字";

}

// --></script>

<form class="sampleform">

   <textarea cols="24" rows="3" onkeyup="CountDownLength('cdlength1', value, 100);"></textarea>

   <p id="cdlength1">あと100文字</p>

   <input type="text" onkeyup="CountDownLength('cdlength2', value, 15);" maxlength="15">

   <p id="cdlength2">あと15文字</p>

</form>

※複数行入力欄（textarea要素）と、1行入力欄（input要素）の両方を並べて掲載しています。
※あとから装飾するために、form要素にclass属性を使って「sampleform」というクラス名を付加しています。
※入力欄を同一ページ内に複数回使う場合は、それぞれID名を重複しないように修正するのを忘れないで下さい。（上記では、cdlength1 と cdlength2 というID名を指定しています。）
※1行入力欄で、入力文字数を制限する必要がない場合は「maxlength="15"」の部分を削除して下さい。

3-2. スタイルシートで装飾

最後に、冒頭のサンプルのように装飾する方法をご紹介いたします。

<style type="text/css">

   form.sampleform { margin: 5px; }

   form.sampleform textarea,

   form.sampleform input { width: 300px; }

   form.sampleform p { margin: 1px 0px 0.5em 0px; padding: 0px; text-align: right; color: #cc0000; width: 300px; }

</style>

textarea要素とinput要素の横幅を300ピクセルにしています。
p要素の横幅もそれに合わせて300ピクセルにして、text-alignプロパティを使って右寄せ（right）にしています。また、表示色を濃い赤色（#cc0000）にしています。さらに、上側に1ピクセル、下側に0.5文字分の余白を設けています。

上記のソースを使って表示させると、以下のように見えます。