yano3nora
7/2/2017 - 7:19 AM

[js: money comma] 金額系inputフィールドカンマ区切りしたい的fuck要件。 #js

[js: money comma] 金額系inputフィールドカンマ区切りしたい的fuck要件。 #js

/*
意外と面倒。かつinput[type=number]だとブラウザ毎に違った表示になったりするのでjs+テキストボックスが無難かしら。
あとカンマ区切りで表示させた数値たちをJSで改めて扱いたいときは文字列なので邪魔なものを削除してから計算しないと。
> refs: http://jquery.nj-clucker.com/add-comma-as-thousands-separator/
*/


// 以下、サンプルコード(結構前の案件なんで注意)。


/**
 * js-money-input
 * 数値カンマ区切り(文字列)→数値を入れ替え
 * カンマ区切り状態のinputから値をとるときは.val().replace(/^\s+|\s+$|,/g,'')こんな風にしてね。
 */
$(document).on('change','.js-money-input',function(){
  $('.js-money-input').each(function(){
    $(this).val(figureToMoney($(this).val()));
  });
});
$(document).ready(function(){
  if($('.js-money-input')[0]){
    $("form").on('submit',function(){
      $('.js-money-input').each(function(){
        $(this).val(figureToNumber($(this).val()));
      });
    });
    return true;
  }
});
$(document).ready(function(){
  if($('.js-money-input')[0]){
    $('.js-money-input').each(function(){
      $(this).val(figureToMoney($(this).val()));
    });
  }
});


/**
 * 数値の3桁カンマ区切り -> onBlurで入力値をカンマ区切りにして返却
 * @param numVal: 入力数値
 * @return String: カンマ区切りされた文字列
 */
function figureToMoney(numVal){
  if(numVal == ""){
    return "";
  }
  numVal = toHalfWidth(numVal).replace(/,/g, "").trim();
  if(!/^[+|-]?(\d*)(\.\d+)?$/.test(numVal)){
    return numVal;
  }
  var numData = numVal.toString().split('.');
  numData[0] = Number(numData[0]).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
  return numData.join('.');
}
/**
 * onFocus で普通の数値に
 */
function figureToNumber(strVal){
  if(strVal == ""){
    return "";
  }else{
    return strVal.replace(/,/g , "");
  }
}
/**
 * 全角から半角への変換
 */
function toHalfWidth(strVal){
  var halfVal = strVal.replace(/[!-~]/g,
    function(tmpStr){
      return String.fromCharCode(tmpStr.charCodeAt(0) - 0xFEE0);
    }
  );
  return halfVal.replace(/”/g, "\"")
    .replace(/’/g, "'")
    .replace(/‘/g, "`")
    .replace(/¥/g, "\\")
    .replace(/ /g, " ")
    .replace(/〜/g, "~");
}