purazumakoiの[はてなブログ]

技術メモから最近はライフログも増えてきてます。

文字数カウンターを作る

昔作った文字数カウントするやつが出てきたのでメモ、
この頃はjqueryをあんまり使って無かったみたい。
Prototypeのversionは'1.5.1.1'

完成デモ

demo

主なソース部分

html側

<script type="text/javascript" src="../js/prototype.js"></script>
<script type="text/javascript" src="../js/text_count.js"></script>
・
・
・
<textarea  id="tContents"></textarea>
<p>現在の文字数<span id="sCount"></span>文字</p>


text_count.js

window.onload = function () { 
	fCount_load();
}

// ページの初期化
function fCount_load() {
 // イベントを割り当てる
 Event.observe( $( 'tContents' ),  'keyup', label_KeyUp,  false );
 Event.observe( $( 'tContents' ),  'click', label_KeyUp,  false );
 Event.observe( $( 'tContents' ),  'focus', label_KeyUp,  false );
 Event.observe( $( 'tContents' ),  'blur', label_KeyUp,  false );
 // 初期チェック
 label_KeyUp();
}

// ラベル欄のリアルタイム入力チェック
function label_KeyUp() {

 var input = $( 'tContents' ).value;
 var count = input.length;

 var available = count;
 $( 'sCount' ).innerHTML = available;

 return;
}