フォーム入力で、メールアドレス・電話番号、郵便番号などをユーザーに入力してもらうとき、全角半角変換がしたい時があるので備忘録として貼り付けときます。【※追記】カタカナ・ひらがな変換機能も追加しました。

(function() {
	$(document).ready(function() {

		/**
		 * ------------------------------------------------------------
		 * クラスにバインド
		 */

		$(document).on('change click blur', '.nospace', function() {
			$(this).val(del_space($(this).val()));
		});
		$(document).on('change click blur', '.trim', function() {
			$(this).val(trim($(this).val()));
		});
		$(document).on('change click blur', '.hankaku', function() {
			$(this).val(hankaku($(this).val()));
		});
		$(document).on('change click blur', '.zenkaku', function() {
			$(this).val(zenkaku($(this).val()));
		});
		$(document).on('change click blur', '.hankaku-num-only', function() {
			$(this).val(hankaku_num_only($(this).val()));
		});
		$(document).on('change click blur', '.zenkaku-num-only', function() {
			$(this).val(zenkaku_num_only($(this).val()));
		});
		$(document).on('change click blur', '.num-and-hyphen', function() {
			$(this).val(numberAndHyphen($(this).val()));
		});
		$(document).on('change click blur', '.zenkaku-only', function() {
			$(this).val(del_hankaku(zenkaku($(this).val())));
		});
		$(document).on('change click blur', '.hankaku-only', function() {
			$(this).val(del_zenkaku(hankaku($(this).val())));
		});
		$(document).on('change click blur', '.hiragana', function() {
			$(this).val(conv_hiragana($(this).val()));
		});
		$(document).on('change click blur', '.katakana', function() {
			$(this).val(conv_katakana($(this).val()));
		});
		$(document).on('change click blur', '.hiragana-only', function() {
			$(this).val(only_hiragana($(this).val()));
		});
		$(document).on('change click blur', '.katakana-only', function() {
			$(this).val(only_katakana($(this).val()));
		});

		/**
		 * ------------------------------------------------------------
		 * 変換関数
		 */

		/**
		 * できるだけ半角にする
		 */
		function hankaku(t) {
			return (t + '').replace(/[！-～]/g, function(s) {
				return String.fromCharCode(s.charCodeAt(0) - 0xFEE0);
			});
		}
		/**
		 * できるだけ全角にする
		 */
		function zenkaku(t) {
			return (t + '').replace(/[!-~]/g, function(s) {
				return String.fromCharCode(s.charCodeAt(0) + 0xFEE0);
			});
		}
		/**
		 * 半角数字だけにする
		 */
		function hankaku_num_only(t) {
			return (hankaku(t)).replace(/[^0-9]/g, '');
		}
		/**
		 * 全角数字だけにする
		 */
		function zenkaku_num_only(t) {
			return (zenkaku(t)).replace(/[^０-９]/g, '');
		}
		/**
		 * 半角に変換後、数字とハイフンだけにする
		 */
		function numberAndHyphen(t) {
			return (hankaku(t)).replace(/[ー－―～＿]+/g, '-').replace(/[^0-9\-]/g, '');
		}
		/**
		 * 半角を削除
		 */
		function del_hankaku(t) {
			return (t + '').replace(/[!-~\s]/g, '');
		}
		/**
		 * 全角を削除
		 */
		function del_zenkaku(t) {
			return (t + '').replace(/[^!-~\s]/g, '');
		}
		/**
		 * 先頭と末尾の空白と改行を削除
		 */
		function trim(t) {
			return (t + '').replace(/^[\s]*/, '').replace(/[\s]*$/, '');
		}
		/**
		 * 空白・改行を削除
		 */
		function del_space(t) {
			return (t + '').replace(/[\s　]+/g, '');
		}
		/**
		 * 平仮名だけにする
		 */
		function only_hiragana(t) {
			t = conv_hiragana(t);
			return (t + '').replace(/[^ぁ-ん０-９ー\s]+/g, '');
		}
		/**
		 * ひらがなに変換する
		 */
		function conv_hiragana(t) {
			t = zenkaku(t);
			return (t + '').replace(/[ァ-ン]/g, function(s) {
				return String.fromCharCode(s.charCodeAt(0) - 0x60);
			});
		}
		/**
		 * カタカナだけにする
		 */
		function only_katakana(t) {
			t = conv_katakana(t);
			return (t + '').replace(/[^ァ-ン０-９ー\s]+/g, '');
		}
		/**
		 * カタカナに変換する
		 */
		function conv_katakana(t) {
			t = zenkaku(t);
			return (t + '').replace(/[ぁ-ん]/g, function(s) {
				return String.fromCharCode(s.charCodeAt(0) + 0x60);
			});
		}

	});
})($);

※jQuery必須です。

使い方

使い方としては、jQueryと上記ファイルを読み込んで、inputタグやtextareaタグにclassを指定していくと勝手に変換されます。

例えば、前後の空白を削除して、全角文字だけにしたい場合には次のようにします。

<input class="trim zenkaku" type="text" name="data[1]" value="" placeholder="データ１">

各クラスと機能

inputタグのclass属性に下記クラスを設定すると機能を実装できます。各クラスと機能は次の通りです。スペース区切りで複数指定すると、複数の機能を持たせることができます。

• nospace…改行や空白を削除
• trim…入力内容の前後の空白や改行、タブ文字を削除
• hankaku…できるだけ半角文字にする。漢字など半角文字にできないものは残す。
• zenkaku…できるだけ全角文字にする。変換できない文字は残す。
• hankaku-num-only…半角数字だけにする。改行・空白・小数点なども含めその他の文字はすべて削除される。
• zenkaku-num-only…全角数字だけにする。改行・空白・小数点なども含めその他の文字はすべて削除される。
• num-and-hyphen…電話番号などで利用。数字を半角に変更、長音記号「ー」などは半角ハイフン「-」に変換、数字とハイフン以外の文字は削除する。
• zenkaku-only…全角文字だけにする。変換できない文字は削除される。改行や空白は残されます。改行や空白を削除したい場合には「nospace」と組み合わせる。
• hankaku-only…半角文字だけにする。変換できなかった文字は削除される。改行や空白は残されます。改行や空白を削除したい場合には「nospace」と組み合わせる。
• hiragana…できるだけ全角ひらがなにする。残りの文字もできるだけ全角にする。変換できない文字はそのまま残す。
• katakana…できるだけ全角カタカナにする。残りの文字もできるだけ全角にする。変換できない文字はそのまま残す。
• hiragana-only…できるだけ全角ひらがなにする。残りの文字もできるだけ全角にする。全角ひらがなと全角数字と長音記号以外は削除する。
• katakana-only…できるだけ全角カタカナにする。残りの文字もできるだけ全角にする。全角カタカナと全角数字と長音記号以外は削除する。