JavaScriptでよく使う全角・半角を変換するスクリプト(メモ)

js-full-half-width
  • URLをコピーしました!

今回は、ユーザーがフォームに入力した際に、JavaScriptで動的に全角半角変換するスクリプト作成したので、忘れないようにメモっておきます。

日本語特有の問題とも言えなくもないが、入力フォームを構築する上でよくある全角半角の問題。
前回、正規表現の記事の時にも書きましたが、ユーザーは基本的に自由に入力できるので、それをJavaScriptで自動的に変換します。

目次

英字・数字・記号を変換

PHPでは[mb_convert_kana()]関数が用意されていますが、JavaScriptでは正規表現を利用して全角半角変換します。
少々面倒ですが、後に記述するカタカナ全角半角変換よりは比較的簡単です。

全角英数字を半角英数字に変換

半角数字を全角数字に変換

カタカナを変換

カタカナPHPの[mb_convert_kana()]のように一発で変更できれば良いのですが、JavaScriptの場合はどうやら1つずつ全角半角変換するしか無いようです。

半角カタカナを全角カタカナに変換

全角・半角の変換タイミングと使い方

JavaScriptでユーザーがフォームに入力したことを検知して、全角半角変換します。
onChangeイベントでも良いかもしれませんが、ここではonBlurイベントが発生した際の書き方を紹介します。

HTMLタグで直接呼び出す

HTMLタグにonBlur属性を追加してJavaScriptで用意した関数を実行させる方法です。

複数の入力項目を一括で処理する

こちらは、不特定多数のinputタグに対して実行させる方法です。

厳密に言うと、[type=”text”]のみで実行させたいですが、とりあえずということで。
色々な書き方があったので、不足等あれば教えてください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

東京生まれ福岡育ちの文系プログラマー。
テクノロジーの恩恵を感じながら日々精進しています。
広く浅くをモットーに、最近ではプログラミングだけでなく、仮想サーバーからセキュリティ、監視システムなども勉強中です。

コメント

コメントする

CAPTCHA


目次