Javascript(jQuery)による全角/半角/数字/ひらがな/カタカナ変換

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

※jQuery必須です。

使い方

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

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

各クラスと機能

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…できるだけ全角カタカナにする。残りの文字もできるだけ全角にする。全角カタカナと全角数字と長音記号以外は削除する。

質問・コメントなどあればどうぞ