<body>
<script>
$(function(){
//金額項目のフォーカスアウトイベント
$('#kingaku').on('blur', function(){
var num = $(this).val();
var pattern = /^([1-9]\d*|0)(\.\d+)?$/; //符号無し小数を処理対象とする
if ((num != "") && (pattern.test(num))){ //空でなく、上記条件に一致する時のみフォーマット処理を実行
num = formatKingaku(num); //フォーマット処理はファンクション化しておくと良い
$(this).val(num); //フォーマット後の値を設定
}
})
//金額項目のフォーカスインイベント
$('#kingaku').on('focus', function(){
var num = $(this).val();
num = delComma(num); //カンマ削除処理はファンクション化しておくと良い
$(this).val(num);
})
})
//金額項目整形処理
function formatKingaku(num){
var syosu = parseInt($('#syosu').val(), 10); //hiddenの値によって小数点以下の桁数を調整
num = parseFloat(num);
num = num.toFixed(syosu); //toFixedで四捨五入される。ex) 1.5toFixed(0)→2、1.234toFixed(2)→1.23
num = addComma(num); //カンマ付与処理はファンクション化しておくと良い
return num;
}
//カンマ付与処理
function addComma(num){
num = num.replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,'); //数字3桁ごとにカンマを付与
return num;
}
//カンマ削除処理
function delComma(num){
num = num.replace(/,/g, ''); //カンマを空文字に置換
return num;
}
</script>
<input type="hidden" id="syosu" >
<input type="text" id="kingaku" >
</body>
