半角を0.5文字カウントしてmaxlengthを設定するJavascript

フォームタグのHTML

<div class="sample">
	<input type="text" maxlength="10" value="" />
	<span class="counter"></span>
</div>

まず入力欄とカウント表示がはいる枠を設け、その中に入力欄と残り文字数カウントの要素を置きます。
この例ではsampleというclassを割りつけていますが、任意の名前をつけてください。
入力可能な文字数はmaxlengthの値からとるため、入力欄には必ずmaxlengthを設定しておきます。

Javascript

<script src="./jquery-1.11.1.min.js"></script>
<script src="./jquery.countLengthHalf.js"></script>
<script>
$(function(){
	var max = new WEBDEVscript.countLengthHalf(
		'.sample', // 入力欄とカウント表示がはいる枠
		{
			input_obj: ':input', // 入力欄
			counter_obj: '.counter' // カウント表示
		}
	);
});
</script>

jQuery(ver1.7以上)と、countLengthHalfのプラグインを読み込んでから
HTMLの入力欄へ動きを設定します。

jquery.countLengthHalf.js ダウンロード