フォーム入力時にひらがな・カタカナ・全角・半角をjQueryで自動変換する

フォーム入力完了時に、ひらがなとカタカナを相互変換、全角英数を半角英数に（ついでにハイフンも統一）自動で変換してくれるjQueryです。
ふりがなの変換や電話番号の入力ミスをバリデーションでエラーを出すより、勝手にやってくれた方がユーザービリティ的に優しいですよね。

ひらがなチェック
カタカナチェック
全角英数を半角英数に変換（ついでにハイフンも統一）
カタカナ→ひらがな変換
ひらがな→カタカナ変換
漢字を入力すると自動でふりがな入力

jQuery関連記事

ひらがなチェック

JavaScript

function isHiragana(idname, category) {
  var kana = $("#" + idname).val();
  if (!kana.match(/^[ぁ-んー]*$/)) {
    $('#errorbox').append(category + "にひらがな以外が入力されています。<br>");
    error += "にひらがな以外が入力されています。<br>";
  }
}

カタカナチェック

JavaScript

function isKatakana(idname, category) {
  var kana = $("#" + idname).val();
  if (!kana.match(/^[ァ-ンー]*$/)) {
    $('#errorbox').append(category + "にカタカナ以外が入力されています。<br>");
    error += "にカタカナ以外が入力されています。<br>";
  }
}

全角英数を半角英数に変換（ついでにハイフンも統一）

JavaScript

$(".char_change").blur(function () {
  charactersChange($(this));
});

charactersChange = function (ele) {
  var val = ele.val();
  var han = val.replace(/[Ａ-Ｚａ-ｚ０-９]/g, function (s) {
    return String.fromCharCode(s.charCodeAt(0) - 0xFEE0)
  });

  if (val.match(/[Ａ-Ｚａ-ｚ０-９]/g)) {
    $(ele).val(han.replace(/[‐－―]/g, "-"));
  }
}

.char_changeとすることで、このclassがついているフォームすべてで適用できるので便利。
ユニコード値で全角から半角に変換して、ついでにハイフンも統一します。

カタカナ→ひらがな変換

JavaScript

$(".kana_change").blur(function () {
  kanaChange($(this));
});

kanaChange = function (ele) {
  var val = ele.val();
  var kana = val.replace(/[ァ-ン]/g, function (s) {
    return String.fromCharCode(s.charCodeAt(0) - 0x60)
  });

  if (val.match(/[ァ-ン]/g)) {
    $(ele).val(kana)
  }
};

.kana_changeとすることで、このclassがついているフォームすべてで適用できるので便利。
ユニコード値でカタカナから、ひらがなに変換する。

ひらがな→カタカナ変換

JavaScript

$(".hira_change").blur(function () {
  hiraChange($(this));
});

hiraChange = function (ele) {
  var val = ele.val();
  var hira = val.replace(/[ぁ-ん]/g, function (s) {
    return String.fromCharCode(s.charCodeAt(0) + 0x60)
  });

  if (val.match(/[ァ-ン]/g)) {
    $(ele).val(hira)
  }
};

.hira_changeとすることで、このclassがついているフォームすべてで適用できるので便利。
ユニコード値で、ひらがなからカタカナに変換する。