国際電話番号を判別するjQueryプラグイン「jquery.mobilePhoneNumber」

電話番号を入力してもらう際に国際電話のケースもあるかもしれません。
その際はjQueryプラグインの jquery.mobilePhoneNumberを利用するとユーザーに安心感を与えられるかもしれません。

sponsors

使用方法

jquery.mobilePhoneNumberからファイル一式をダウンロードします。
    
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.caret.js"></script>
<script type="text/javascript" src="jquery.mobilePhoneNumber.js"></script>
<script>
$(function(){
      $('[type=tel]').mobilePhoneNumber();
      //国名を表示する場合は下記も追加
      $('[type=tel]').bind('country.mobilePhoneNumber', function(e, country) {
        $('.country').text(country || '')
      })
   
});
</script>
    
入力エリアを下記のように記述します。

  <div class="country"></div> <!-- 国名を表示させる場合 -->
  <input type="tel" pattern="\d*" x-autocompletetype="tel" placeholder="Mobile Phone Number" autofocus>
    

サンプル


+81と入力するとJPが表示されます。
Javascriptサンプルページ一覧
skuare.net

sponsors