<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>