テキストエリアの入力バイトをカウントする
テキストエリアのonChangeイベントは、フォーカスを移動したときしか動作しないので、リアルタイムにカウントするように作ってみました。本当はイベントをKeyUpかKeyDownに限定したほうがよいかも。
文字数単純にlengthを使うと2byte文字が"1"とカウントされてしまうので、これを"2"と数えることができるとほほのものを使いました。ですが、この関数はencodeURLして%uが先頭につくものを単純に"2"として数えているため、半角カナ文字も"2"と計上されます。実用としてはもう少し調整が必要そうです。
<html>
<head>
<script src="http://prototype.conio.net/dist/prototype-1.3.1.js"></script>
<script language="javascript">
<!--
function jstrlen(str) {
var len = 0;
str = escape(str);
for (var i = 0; i < str.length; i++, len++) {
if (str.charAt(i) == "%") {
if (str.charAt(++i) == "u") {
i += 3;
len++;
}
i++;
}
}
return len;
}
//-->
</script>
</head>
<body onLoad="new Form.Element.Observer($('area'), 3, function(){
$('c').innerHTML = jstrlen($('area').value);
})">
<div id="c">0</div>
<textarea id="area"></textarea>
</body>
</html>
