中学受験専門 理科総合研究所 −理総研−
014：入力された文字数をリアルタイムにカウントして表示する対象言語：JavaScript / jQuery
|
|
| キーワード：JavaScript jQuery 文字数 カウント 数える リアルタイム 表示 改行 コード 取り除く | |
|
実働サンプル（設定上限文字数：20字）
現在の文字数：0字
テキストエリア等文字の入力フィールドがあってサイト管理者が文字数の上限を設定するとき、現在入力されているテキストの文字数がリアルタイムに表示されると便利ですよね、って思ってしまいました。
なぜこの処理が必要になったかと言えば、いざMySQL等のデータベースに入力データを登録するとき、POSTされたデータの特殊文字をPHPのhtmlspecialchars関数でHTMLエンティティに置換すると総文字数が変化してしまうからです。ページのリダイレクトなり遷移なりを間に挟んでPHPのみで文字数チェックを行えば、こういった差（サイト管理者が意図する文字数 vs 入力者が意図する文字数）が少なからず発生します。さらに改行コードの問題もあります。入力者が改行を入れると目には見えないながら改行コードが付加されて制限文字数を圧迫します。
そういったいくつかの問題点をクリアして、以下のようなコードを作ってみました。
|
|
<head> <!--- jQueryを使用します ---> <script type="text/javascript" src="jquery.js"></script> </head> <!--- 入力場所 limit=""はサイト管理者が設定する上限文字数 ---> <textarea style="height:80px; width:100%;" id="count_area" limit="20"></textarea> <!--- <input type="text" value="" id="count_area" limit="20" />等でも可 ---> <!--- 文字数表示場所 ---> 現在の文字数：<span id="moji_suu">0</span>字
<script>
$(function(){
//カウントするフィールドを監視
$("#count_area").keyup(function(){
//現在入力されている文字
var text = $(this).val();
//正確にカウントするため改行コード削除
text = text.replace((new RegExp("\r\n","g")),"");
text = text.replace((new RegExp("\n","g")),"");
//現在の文字数
var count = text.length;
//管理者が設定した上限文字数
var moji_limit = $(this).attr("limit");
//文字数をリアルタイムの表示
$("#moji_suu").text(count);
//処理分け
if(count == 0){
//字を消して0文字となった場合。
$("#moji_suu").text("0");
} else if(count > moji_limit) {
//上限文字数を超えたら赤色表示
$("#moji_suu").css("color", "red");
} else {
//文字数が範囲内なら色を戻す
$("#moji_suu").css("color", "");
}
});
});
</script>
|
