フォームでの全角⇒半角変換（電話番号、メールアドレス）

メールフォームのバリデーション

メールフォームのバリデーションが微妙に当たり前な雰囲気になりつつあるWEB制作業ですが、予算により対応するかどうかを決めるのはどこでも同じだと思います。

しかし予算が足りなくとも、それでもやっておくべきかな、と思うのが「電話番号とメールアドレスで全角で入力された場合、半角に変換する」というメールフォームの機能です。ケースとして下記のような事例が考えられます

携帯電話等にメール転送を行っている場合、半角文字であればクライアントさんがすぐに電話をかけることができる
（半角数字のみ）とか（ハイフンなし）とかユーザに考えさせるのは無駄だし、必ず間違えるユーザーは出るし赤字でエラー表示見せつつ再入力させるのってわずらわしい

HTML5なら <input type=”tel”> でOKだし、IEだとime-mode、ガラケーでもキャリアごとにタグが用意されています。<input type=”tel”> はこれからの主流ですが、HTML5に対応していないその他ブラウザ・デバイスについていちいち考えて実装するよりも、JavaScriptで自動変換しちゃうフォーマットを併用しちゃうほうが楽だなと感じます。

全角文字サンプル

じゃあどういうパターンを自動変換すべきか考えてみました

項目	変換対象（全角）	自動変換後（半角）
電話番号	（＋８１）９８０－７２－１２３４	+81980-72-1234
メールアドレス	ｔｅｓｔ．－＿ー、１＋２＠ｅｘａｍｐｌｅ．ｃｏｍ	test.-_-1+2@example.com

※ メールアドレスで利用可能な記号はメールアドレスで使える記号:* nyomo *に詳しい

これらを反映したJavaScriptでのデモサンプルとコードが下記です

デモサンプル

zen2han.js ダウンロード。右クリックで保存してください

JavaScript コード zen2han.js

/*
 * zen2han.js v0.1
 * info: http://company.miyanavi.net/archives/1315
 * auther: miyanavi
 * licence: MIT
 *
 */
jQuery(function(){

    // 電話番号の処理
    $('.tel-number').change( function(){
        var data = $(this).val();
        var hankaku = data.replace(/[Ａ-Ｚａ-ｚ０-９]|\－|\＋/g,function(s){return String.fromCharCode(s.charCodeAt(0)-0xFEE0)});

        // 半角数字と+-のみ残す
        var zenkakuDel = new String( hankaku ).match(/\d|\-|\+/g);
        zenkakuDel = zenkakuDel.join("");

        $(this).val(zenkakuDel);
    });

    // メールアドレスの処理
    $('.mail-address').change( function(){
        var zenkigou = "＠－ー＋＿．，、";
        var hankigou = "@--+_...";
        var data = $(this).val();
        var str = "";

        // 指定された全角記号のみを半角に変換
        for (i=0; i<data.length; i++)
        {
            var dataChar = data.charAt(i);
            var dataNum = zenkigou.indexOf(dataChar,0);
            if (dataNum >= 0) dataChar = hankigou.charAt(dataNum);
            str += dataChar;
        }
        // 定番の、アルファベットと数字の変換処理
        var hankaku = str.replace(/[Ａ-Ｚａ-ｚ０-９]/g,function(s){return String.fromCharCode(s.charCodeAt(0)-0xFEE0)});
        $(this).val(hankaku);
    });

});

* zen2han.js v0.1

* info: http://company.miyanavi.net/archives/1315

* auther: miyanavi

* licence: MIT

jQuery(function(){

// 電話番号の処理

$('.tel-number').change( function(){

var data = $(this).val();

var hankaku = data.replace(/[Ａ-Ｚａ-ｚ０-９]|\－|\＋/g,function(s){return String.fromCharCode(s.charCodeAt(0)-0xFEE0)});

// 半角数字と+-のみ残す

var zenkakuDel = new String( hankaku ).match(/\d|\-|\+/g);

zenkakuDel = zenkakuDel.join("");

$(this).val(zenkakuDel);

});

// メールアドレスの処理

$('.mail-address').change( function(){

var zenkigou = "＠－ー＋＿．，、";

var hankigou = "@--+_...";

var data = $(this).val();

var str = "";

// 指定された全角記号のみを半角に変換

for (i=0; i<data.length; i++)

{

var dataChar = data.charAt(i);

var dataNum = zenkigou.indexOf(dataChar,0);

if (dataNum >= 0) dataChar = hankigou.charAt(dataNum);

str += dataChar;

}

// 定番の、アルファベットと数字の変換処理

var hankaku = str.replace(/[Ａ-Ｚａ-ｚ０-９]/g,function(s){return String.fromCharCode(s.charCodeAt(0)-0xFEE0)});

$(this).val(hankaku);

});

電話番号の input に .tel-number のクラスを、メールアドレスの input に .mail-address を付与する形でパーツを指定しています。

<form>
    <div>電話番号<input type="text" class="tel-number"></div>
    <div>メールアドレス<input type="text" class="mail-address"></div>
</form>

<form>

<div>メールアドレス<input type="text" class="mail-address"></div>

</form>

使ってみると、思ったよりも良い使用感のスクリプトです、もっと早く作っとけばよかったなぁ。

[参考URL]

フォームでの全角⇒半角変換（電話番号、メールアドレス）

メールフォームのバリデーション

全角文字サンプル

JavaScript コード zen2han.js

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル