今回は、ユーザーがフォームに入力した際に、JavaScriptで動的に全角・半角を変換するスクリプト作成したので、忘れないようにメモっておきます。
日本語特有の問題とも言えなくもないが、入力フォームを構築する上でよくある全角・半角の問題。
前回、正規表現の記事の時にも書きましたが、ユーザーは基本的に自由に入力できるので、それをJavaScriptで自動的に変換します。
目次
英字・数字・記号を変換
PHPでは[mb_convert_kana()]関数が用意されていますが、JavaScriptでは正規表現を利用して全角・半角を変換します。
少々面倒ですが、後に記述するカタカナの全角・半角の変換よりは比較的簡単です。
全角英数字を半角英数字に変換
半角数字を全角数字に変換
カタカナを変換
カタカナもPHPの[mb_convert_kana()]のように一発で変更できれば良いのですが、JavaScriptの場合はどうやら1つずつ全角・半角を変換するしか無いようです。
半角カタカナを全角カタカナに変換
cly7796.net


inputに入力した文字を決められた形に変換する
フォームなどで入力した文字列を、あらかじめ決められた形に変換してみます。 全角英数を半角英数に変換する HTML JavaScript
全角・半角の変換タイミングと使い方
JavaScriptでユーザーがフォームに入力したことを検知して、全角・半角を変換します。
onChangeイベントでも良いかもしれませんが、ここではonBlurイベントが発生した際の書き方を紹介します。
HTMLタグで直接呼び出す
HTMLタグにonBlur属性を追加してJavaScriptで用意した関数を実行させる方法です。
複数の入力項目を一括で処理する
こちらは、不特定多数のinputタグに対して実行させる方法です。
厳密に言うと、[type=”text”]のみで実行させたいですが、とりあえずということで。
色々な書き方があったので、不足等あれば教えてください。
コメント