全角入力を半角にリアルタイムで変換する

フォームなどで半角英数のみを入力させたい場合、CSSのime-modeを使えば実装できますが、Google Chromeでは対応していません。
今回はフォーム入力時にリアルタイムで全角英数を半角英数に変換する処理(英数字のみで記号は対象外)を実装してみます。

うまくいかなかった場合のサンプル

最初にやろうとして、微妙にうまくいかなかったサンプルです。

HTML

<input type="text" name="" class="sample" />

JavaScript

$(function() {
	$('.sample').keyup(function(e) {
		$(this).val(convertStr($(this).val()));
	});
});

// 変換処理
function convertStr(str) {
	var halfStr = str.replace(/あ/g, 'a').replace(/い/g, 'i').replace(/う/g, 'u').replace(/え/g, 'e').replace(/お/g, 'o').replace(/[Ａ-Ｚａ-ｚ０-９]/g, function(s) {
		return String.fromCharCode(s.charCodeAt(0)-0xFEE0);
	});
	return halfStr;
}

母音は入力した段階で英数字ではなくなっているので、最初に「あいうえお」を「aiueo」に変換するようにしています。
keyup時に入力内容を変換する形で問題ないかと思っていたのですが、入力スピードが速いと変換がうまくいかない場合がありました。
うまくいかなかった場合のデモページ
　

最終的なコード

色々試してみたのですがどれもいまいちだったので、最終的にフォーカスが当たっている時のみsetIntervalで入力内容を監視するようにしました。

JavaScript

$(function() {
	$('.sample').focus(function() {
		monitoring($(this));
	});
	$('.sample').blur(function() {
		monitoringClear($(this));
	});

});

var monitoringTimer;
// 入力エリアの監視
function monitoring(ele) {
	// 変更前の文字列
	var before = ele.val();
	// 現在の文字列
	var current = ele.val();
	monitoringTimer = setInterval(function() {
		// 現在の文字列取得
		current = ele.val();
		// 変更があった場合
		if(before != current) {
			// 文字列の変換
			current = convertStr(ele.val());
			// 各値の上書き
			before = current;
			ele.val(current);
		}
	}, 10);
}
// 入力エリアの監視終了
function monitoringClear(ele) {
	clearInterval(monitoringTimer);
}

// 変換処理
function convertStr(str) {
	var halfStr = str.replace(/あ/g, 'a').replace(/い/g, 'i').replace(/う/g, 'u').replace(/え/g, 'e').replace(/お/g, 'o').replace(/[Ａ-Ｚａ-ｚ０-９]/g, function(s) {
		return String.fromCharCode(s.charCodeAt(0)-0xFEE0);
	});
	return halfStr;
}

入力時にリアルタイムで全角を半角に変換するデモページ
これで一応想定した動きになりました。

今回記号は変換対象に含めていませんが、記号も合わせて変換したい場合はconvertStr()内で一緒に変換してしまえばよさそうです。