数値をカンマ区切りに整形するプラグインを書いた #jQuery

<input type=text> に入力した数値をカンマ区切りにして表示するプラグインです。
単純に表示だけを整形する分には、それほど面倒ではないのですが、submit時にカンマが付いたままサーバーに送信するのは都合が悪い。
数値が入力されているので、フォーカスを受け取った時に、キャレットは文字列の最後にあってほしいと、なんだかんだで、面倒。
主に3点に付いて対応したものを作成しました。

ソースコード

jquery.number-format.js

/*!
 jquery.number-format.js

 This software is released under the MIT License
 http://opensource.org/licenses/mit-license.php
 */
(function ($) {

    $.fn.numberformat = function (options) {

        // option
        var setting = $.extend({
            align: 'right',
            separator: ','
        }, options);

        // remove comma
        var rmcomma = function (val) {
            return val.toString().replace(setting.separator, '');
        };

        // format number
        var fmcomma = function (val) {
            var v = rmcomma(val);
            return v.replace(/(\d)(?=(?:\d{3}){2,}(?:\.|$))|(\d)(\d{3}(?:\.\d*)?$)/g
                    , '$1$2' + setting.separator + '$3');
        };

        // make the string formatted on changed
        this.change(function () {
            var val = $(this).val();
            $(this).val(fmcomma($(this).val()))
                    .attr('data-value', rmcomma(val))
                    .css({
                        textAlign: setting.align
                    });
        }).change();

        // Move caret to end of string on focused
        this.focus(function () {
            var v = $(this).val();
            $(this).val('').val(rmcomma(v));
        });

        // format number on blur
        this.blur(function () {
            var v = $(this).val();
            $(this).val(fmcomma(v));
        });

        // Remove comma on submit
        this.parents('form').submit(function () {
            $(this).find('input').each(function () {
                $(this).val(rmcomma($(this).val()));
            });
        });

        return this;
    };
})(jQuery);

サンプル

数値を用いて、JavaScript で演算するときは、data-value 属性を使ってください。

<!DOCTYPE HTML>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>サンプル</title>
    </head>
    <body>
        <form action="" method="post">
            <p>
                <label for="quantity">数量</label>
                <input type="text" name="quantity" id="quantity" data-format="number" value="30" />
            </p>
            <p>
                <label for="price">単価</label>
                <input type="text" name="price" id="price" data-format="number" value="1380" />
            </p>
            <p>
                <label for="sumption">合計</label>
                <input type="text" name="sumption" id="sumption" data-format="number" />
            </p>
            <p>
                <button type="button" id='calc'>計算</button>
            </p>
        </form>
        <script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script>
        <script type="text/javascript" src="jquery.number-format.js"></script>
        <script type="text/javascript">
            $(function () {
                var options = {
                    align: 'right', // 右寄せ: right, 左寄せ: left, 中央: center
                    separator: ',' // 桁区切りに用いる文字
                };
                $('[data-format="number"]').numberformat(options);

                // JavaScript で演算するときは、data-value で行う。
                function calc() {
                    var quantity = $('#quantity').attr('data-value');
                    var price = $('#price').attr('data-value');
                    var sumption = quantity * price;
                    $('#sumption').val(sumption).change();
                }

                $('#calc').on('click', function () {
                    calc();
                }).click();
                $('#quantity, #price').on('change keyup', function () {
                    calc();
                });
            });
        </script>
    </body>
</html>