━目次━
業務系システムで金額項目のテキストボックスによくある仕様です。
フォーカスインした時は３桁区切りのカンマを削除
フォーカスアウトした時に３桁区切りのカンマを付与
フォーカスアウトした時に自動で小数点以下を規定の数で設定
備忘として載せておきます。
サンプルコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<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> |
ポイントは以下になります
●Point●
各処理をファンクション化しておくことで複数のテキストボックスから呼びやすくする
フォーマット前に正規表現で正しい数値かチェックしておく
hiddenに小数以下の桁数を設定することで動的に小数以下を制御する(不変の場合は定数で良い)
さいごに
もちろん登録前にクライアントサイドかサーバサイドで数値チェックや桁数チェックをする必要があるので注意してください！
それでは！また！！
最後まで読んで頂きありがとうございます！
人気の記事だけ集めたので是非覗いていってください＾＾
厳選！目的別にオススメ記事を紹介-あなたの欲しい情報がここに-
人気の記事だけ集めたので是非覗いていってください＾＾
厳選！目的別にオススメ記事を紹介-あなたの欲しい情報がここに-
