全角・半角を判別して文字数をカウントするJavaScript

フォーム画面の設計で、文字数制限のある項目を入力しやすいようにするにはどうすればーと、ぽかんとしながら考えていたら、はてなブックマークのコメント入力欄のように文字数をカウントしてあげれば良いんじゃないかという結論に。

そしてこれは後で思い出したのだけど、実は社内システムのフォーム画面ですでに実装されていたものだったりしたのだけど、一応備忘録ということでコードをメモ。

JavaScriptはあまり得意じゃないので、ここを参考にしながら。

仕様

• 全角は1文字
• 半角は2文字で1文字
• 半角は切り上げカウント
• つまり、「あa」は2文字とカウント、「あaa」も2文字とカウント
• 指定した文字数を超えると出るメッセージが変更

JavaScriptコード

<script type="text/javascript">
<!--
//文字数の設定
var stopCount = 50;

function strLength(strSrc){
	len = 0;
	strSrc = escape(strSrc);
	for(i = 0; i < strSrc.length; i++, len++){
		if(strSrc.charAt(i) == "%"){
			if(strSrc.charAt(++i) == "u"){
				i += 3;
				len++;
			}
			i++;
		}
	}
	return len;
}
function showLength( str,name ) {
	var strCount = Math.ceil(strLength(str).toString() / 2);
	if(strCount > stopCount){
		document.getElementById(name + "Inner").innerHTML = '<em style="color:#ff0000;">' + strCount + ' / 50 Over!</em>';
	}else if(strCount == stopCount){
		document.getElementById(name + "Inner").innerHTML = '<em style="color:#ff0000;">' + strCount + ' / 50</em>';
	}else{
		document.getElementById(name + "Inner").innerHTML = strCount + " / 50";
	}
}

window.onload = function(){
	var text2Check = document.getElementById("text2");
	text2Check.onkeyup = function(){
		showLength(document.getElementById("text2").value,document.getElementById("text2").id);
	}
}

// -->
</script>

フォームに入力された文字列をエンコードして「%u」の文字があれば全角扱い。それ以外は半角扱いで、半角での文字数をカウント。

HTMLコード

<form id="textForm" name="textForm" method="post" action="">
	<p>
		<label> text1
		<input name="text1" type="text" id="text1" size="50" onkeyup="showLength(value,id);"/>
		</label>
		<span id="text1Inner">0 / 50</span>
	</p>
	<p>
		<label>text2
		<input name="text2" type="text" id="text2" size="50" />
		</label>
		<span id="text2Inner">0 / 50</span>
	</p>
</form>

<input> に onkeyup を指定する方法と、getElementById を使う方法2通り。

サンプル