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

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

  • Posted by: zaru
  • 2007年6月27日 21:03
  • 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通り。

サンプル

0 / 50

0 / 50

Comments:7

(ai) 2008年6月19日 12:29

Firefoxはonkeyupでは動きませんよ。
onblurとか使うといいです。

zaru 2008年6月19日 12:58

(ai)さん
コメントありがとうございます。
onkeyupだとFirefoxでは動かないということですが、こちらのFirefox(ver3)では一応動いているっぽいのですが、もしかしてバージョンの違いなのでしょうか?
それとも、僕の勘違いで全然違うことなんでしょうか?

名無し 2009年2月12日 17:39

始めたばかりのわたしにはなにがなんだか・・・

黒金 2009年5月17日 00:07

突然失礼いたします。
私は今、SNSとメールを使用した文章媒体のゲームを準備しておりまして、そこで参考に使える「テキストの文字数をカウントできるアプリ」をさがしておりました。

それにあたって、こちらに提示されているコードを使わせていただきたいのですが、お許しいただけますでしょうか。

アドレスが現在仮置きしているページです。(ゲーム開始時には移動します)

zaru 2009年5月17日 02:06

黒金さん
はじめまして。
ただのコードで著作権とかないので、自由にお使いください。
お役に立てて嬉しいです。

黒金 2009年5月17日 13:31

お許しいただきまして、ありがとうございました。
助かります!

goody 2009年6月16日 22:25

便利なスクリプトをありがとうございます。
ところで質問なんですが改行を3バイトとして処理したいのですが
方法があればアドバイスお願いします。

Comment Form

Trackbacks:0

TrackBack URL for this entry
http://blog.tofu-kun.org/mt-tb.cgi/331
Listed below are links to weblogs that reference
全角・半角を判別して文字数をカウントするJavaScript from Webプログラマー+WebデザイナーなZARU日記

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

Profile

zaru

Name : zaru

Webプログラマ+Webデザイナで、Webディレクタやってます。Twitterやっているので、ぜひフォローしてやってくださいませ。Twitter - zaru。また、そのほかのプロフィールについては、iddy - zaruを見てください。

Search
Feeds
Others

Return to page top