読者です 読者をやめる 読者になる 読者になる

3桁カンマ区切り

Webアプリ開発で、数値を3桁のカンマ区切りで入力させる input タグへの対処として、jQuery を使った方法を
よく見かけます。
皆、良くできていているのですが、受信するサーバ側でカンマ区切り文字を取り除いて解釈しなければならず、
ちょっと惜しい感がありました。

入力表示は3桁カンマ区切りでも、送信データでは整数値のカンマ無しの形式で送るようにすべきと思い、
FORM送信でも、AJAX送信でも、どちらも対応できるような jQueryを書いてみました。

仕様は、input タグ、type="text" だけに適用させるものとして、
jQuery セレクタで対象を指定し、任意のフィルタ=特定のinputタグだけ、つまり同じ数値入力をする inputタグを配置させる可能性あるので、
任意に指定できるフィルタで、
3桁カンマ区切りを除去させます。

以下、ThreeDigits.js というJavaScriptソースを作成します。
/**
 * ThreeDigits.js
 *
 * 「設定関数」
 * ThreeDigits.configure( selector [, filter] );
 *   selector = 3桁区切り対象の input を取得する為の jQueryセレクタ
 *   filter(省略可能) = filter関数の結果が true になる input要素を、桁区切りカンマを取り除いて
 *   form送信するようにする。
 *
 * 「データ取得関数」
 * ThreeDigits.getInputData( [filter] );
 *   input の name属性をキーにした input の value値のハッシュ配列を取得する。
 *   filter関数 を指定した場合、(省略可能)
 *   filter関数の結果が true になる input要素を、桁区切りカンマを取り除いて
 *   input の value値のハッシュ配列を返す。
 *   filter関数が常に false を返すのであれば、省略した場合と同じ結果になる。
 */

ThreeDigits = {
   configure : function(selector, filter){
      $(selector).focusout(function(){
         var str = $(this).val();
         str = str.replace(/[0-9]/g, function(s){ return String.fromCharCode(s.charCodeAt(0)-0xFEE0); });
         str = str.replace(/,/g, '');
         if (str.match(/^(|-)[0-9]+$/)){
            str = str.replace(/^[0]+([0-9]+)/g, '$1');
            str = str.replace(/([0-9]{1,3})(?=(?:[0-9]{3})+$)/g, '$1,');
         }
         $(this).val(str);
      }).focusin(function(){
         var str = $(this).val();
         str = str.replace(/,/g, '');
         $(this).val(str);
      });
      if (typeof(filter) != "undefined"){
         $('form').submit(function(){
            $(':input[type=text]').each(function(ix, element){
               if (filter(element)){
                  var v = $(element).val().replace(/,/g, '');
                  $(element).val(v);

               }
            });
         });
      }
   }
   ,
   getInputData : function(filter){

      var data = {};
      if (typeof(filter)==="undefined"){
         $(':input[type=text]').each(function(ix, element){
            data[$(element).attr('name')] = $(element).val();
         });
      }else{
         $(':input[type=text]').each(function(ix, element){
            if (filter(element)){
               data[$(element).attr('name')] = $(element).val().replace(/,/g, '');
            }else{
               data[$(element).attr('name')] = $(element).val();
            }
         });
      }
      return data;
   }
};
----------------------------------------
3桁カンマ区切りにする input の class属性として、"threeDigits" というの定義した例で
form送信/AJAX送信、それぞれの適用スクリプトは以下のようになる。


form送信で実行する場合、


<script type="text/javascript">
$(function(){
   ThreeDigits.configure(':input[class=threeDigits]', function(element){
      return $(element).attr('class')==="threeDigits";
   
});
});
</script>

これだけです。既に form要素の submitイベントに対する割り込みを
ThreeDigits.configure の中で設定しまうからです。


AJAX送信で実行する場合、ThreeDigits.getInputData で取得したデータを AJAXの送信データとして実行するようにします。


<script type="text/javascript">
$(function(){

   ThreeDigits.configure(':input[class=threeDigits]');

   $('#ajaxsend').click(function(){
      var vdata = ThreeDigits.getInputData(function(element){
         return $(element).attr('class')==="threeDigits";
      }
);
      $.ajax({
         type: 'POST',
         timeout: 30000,
         url: 'http://xxxxx/xxxxx/xxxxx',
         data: vdata,
         dataType: 'html',
         cache: false,
      })
      .done(function(data){
         console.log('done data : ');
      })
      .fail(function(data){
         console.log('fail data : ');
      });
   });
});
</script>