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

カテゴリ:WEB技術, フリー(プログラム) タグ:
閲覧数: 15,145 views
公開日:2013年11月2日

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

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

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

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

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

全角文字サンプル

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

項目 変換対象(全角) 自動変換後(半角)
電話番号 (+81)980-72-1234 +81980-72-1234
メールアドレス test.-_ー、1+2@example.com test.-_-1+2@example.com

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

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

デモサンプル

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

JavaScript コード zen2han.js

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

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

[参考URL]

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です