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

フォーム入力時にひらがな・カタカナ・全角・半角を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(/[A-Za-z0-9]/g, function (s) {
    return String.fromCharCode(s.charCodeAt(0) - 0xFEE0)
  });

  if (val.match(/[A-Za-z0-9]/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がついているフォームすべてで適用できるので便利。
ユニコード値で、ひらがなからカタカナに変換する。

漢字を入力すると自動でふりがな入力

名前の入力項目が、漢字表記とふりがな入力の2つある場合は、jquery.autoKana.jsを使うと、漢字を入力すると自動でふりがな入力されます。
詳細は下記からどうぞ!

フォームで名前の入力をカナにも自動入力してくれるjquery.autoKana.jsの使い方
フォームで名前の入力をしたら自動でフリガナ入力欄にも入力してくれるjquery.autoKana.jsの使い方です。ユーザーが入力する手間が省けるので、ユーザービリティの向上にもつながりますね。 サンプルを用意しました。 ...

コメント

タイトルとURLをコピーしました