半角英数から全角英数へなど、文字を変換するスクリプトをjQueryを使って組んでみた。
2018/09/07
郵便局サイトの住所を入れる際、地番を入れる欄にて「全角数字を使え」という旨のエラーが出ました。
何でわざわざ全角で数字？
漢数字ならまだしも、半角数字で入力されている場合はフロントエンドでなんとでもなるだろう。
なんでそんなところでてを抜くのでしょうなぁ･･･。
冷静になってから全角数字なデータが欲しいであろう理由は幾つか浮かんだのですが、それにしてもフロントエンドで出すべきエラーではないだろう。
「手を抜くんじゃない」という思いから思わず文字変換スクリプトを作ってしまいました。
jquery.tgConvertString
できることは、
(1)半角英数→全角英数
(2)全角英数→半角英数
(3)ひらがな→全角カタカナ
(4)半角カタカナ→全角カタカナ
(5)全角カタカナ→全角ひらがな
の５パターン。
激しく車輪の再開発だとは思うのですが、勉強ついでという側面もあるので気にせず。
デモ
ダウンロード＆設置
ハナからプラグインというか、外部ファイルで作ったので、下のURLよりダウンロード可能です。
気に入ったって方はどうぞ持って行ってやって下さい。
ダウンロード
設置方法
ファイルを展開するとデモと同じファイルがあるので設置方法はわかると思いますが、一応説明。
HTMLファイルのヘッダ内で、「jQuery」(作成時に1.8を使ったので、それ以上なら問題なく動作するはずです)と今回の「jquery.tgConvertString.js」のパスを設定します。
で、例によってjQueryの書式で $(this).tgConvertString(); するだけです。
ヘッダ部分
|
1 2 3 4 5 6 |
<script src="./jquery.tgConvertString.js"></script> <script type="text/javascript"> jQuery(function(){ $(this).tgConvertString(); }); </script> |
フォーム部分
『(1)半角英数→全角英数』で説明すると、対象のtextarea、inputのクラス名を「toZenEisu」として下さい。
それで動作します。
|
1 2 3 |
<p>(1) フォーカスが外れたら「半角英数→全角英数」します。</p> <textarea type="text" cols="50" rows="3" name="form1" class="toZenEisu"></textarea><span class="example">ex.1-23-456-A</span><br> <input type="text" name="form1b" size="30" class="toZenEisu"> |
他の設定クラス名は以下のようになっています。
(1)半角英数 → 全角英数 ：toZenEisu
(2)全角英数 → 半角英数 ：toHanEisu
(3)全角ひらがな → 全角カタカナ：toKatakana
(4)半角カタカナ → 全角カタカナ：toZenKata
(5)全角カタカナ → 全角ひらがな：toHiragana
なお、文字コードがUTF-8でないと正常動作しませんので、注意して下さい。