入力バイト数のチェック

入力バイト数のチェックについて

入力バイト数のチェック

入力された文字数を文字数ではなくてバイト数でチェックをしたい場合があります。

マルチバイト文字はescape() 関数でurlエンコードしたときに「%uxxxxという形式になることを利用して、%uxxxxは2バイト、その他は1バイトとしてカウントします。

例えば、「<2バイト文字123>」という文字をescapeすると以下のようになります。

%3C%uFF12%u30D0%u30A4%u30C8%u6587%u5B57123%3E

「<」 のようなエスケースが必要な文字は、「%3C」のような形式に変換されます。

「2」のようなマルチバイト文字は、「%uFF12」のような形式に変換されることが分かります。

入力バイト数のチェック

<script type="text/javascript">
<!--
function getBytes(strSrc){
	var 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;
}
// -->
</script>

<form name="myForm">
	<input name="text1" type="text" id="text1" size="40">
	<input type="button" onClick="alert(getBytes(document.myForm.text1.value));" value="バイト数は?">
<form>

動作確認サンプル

入力バイト数のチェック

入力バイト数の表示

今度は入力中の文字のバイト数をリアルタイムで表示してみます。文字が入力された子をonKeyUpイベントで捕捉します。

<script type="text/javascript">
<!--

function getBytes(strSrc){
    //省略
}

function showLength(name,str,limit) {
	//var strCount = Math.ceil(strLength(str).toString() / 2); //バイト数ではなく倍角を1文字とカウントする場合
	var strCount = getBytes(str).toString();
	if(strCount > limit){
		document.getElementById(name + "Inner").innerHTML = '<em style="color:#ff0000;">' + strCount + ' / ' + limit + ' Over!</em>';
	}else if(strCount == limit){
		document.getElementById(name + "Inner").innerHTML = '<em style="color:#ff0000;">' + strCount + ' / ' + limit + '</em>';
	}else{
		document.getElementById(name + "Inner").innerHTML = strCount + ' / ' + limit;
	}
}

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

// -->
</script>

<form>
	<p>
		<label>40
		<input name="text1" type="text" id="text1" size="40" />
		</label>
		<span id="text1Inner"></span>
	</p>
	<script type="text/script">showLength("text1","",40);</script>
	<p>
		<label>80
		<input name="text2" type="text" id="text2" size="80" />
		</label>
		<span id="text2Inner"></span>
	</p>
	<script type="text/script">showLength("text2","",80);</script>
</form>

動作確認サンプル

入力バイト数の表示

 

↑このページの先頭へ