[jQueryプラグイン] inputタグの数値(金額)をカンマ区切り

この記事は約3分で読めます。

「入力する数値(金額)を3桁でカンマ区切りで表示したい」

って言うのを頼まれました。

いろんなコードがネットにあるので実現自体はそれらを拝借すればOKなのですが、jQueryプラグインの作成を覚えたいので、あえてプラグイン化してみました。

ボリューム的に関数一つでコト足りる気もするので、どうせならフォーム関連でこのような細かい機能をまとめたプラグインに拡張して行こうと思います。

プラグイン名は後でいろいろ詰め込むと想定して「formUtility」としました。

という訳で、まずは複数のメソッド対応のjQueryプラグインを作成。

そして、

  • 表示時に自動的に3桁ごとにカンマを挿入
  • フォーカス時にはカンマを削除
  • フォーカスが外れたら再びカンマを挿入

という機能のメソッドを実装します。

デモはこちら→(DEMO

スクリプト

;(function($) {

	var plugname = 'formUtility';

	var methods = {

		init : function(params){return this;},

		/**
		 * function numberFormat
		 *
		 */
		numberFormat : function(params){

			var elements = this;

			// カンマ区切りメソッド
			var addFigure = function(str) {
				var num = new String(str).replace(/,/g, "");
				while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2")));
				return num;
			};

			elements.each(function() {

				// ロード時
				$(this).val(
					addFigure($(this).val())
				);
				// フォーカスアウト時
				$(this).blur( function () {
					$(this).val(addFigure($(this).val()));
				});
				// フォーカス時
				$(this).focus( function () {
					$(this).val($(this).val().split(",").join(""));
				});
			});

			return this;
		}

	};
	
	$.fn[plugname] = function(method) {
		if ( methods[method] ) {
			return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
		} else if ( typeof method === 'object' || ! method ) {
			return methods.init.apply( this, arguments );
		} else {
			$.error( 'Method ' +  method + ' does not exist on jQuery.' + plugname );
			return this;
		}
	};
})(jQuery);

対象となるinputタグを指定して

$(".money").formUtility("numberFormat");

のように指定します。

ダウンロードはこちら

不具合や仕様について、何よりコードの書き方などプログラム初心者へのご指摘大歓迎! コメントかメールでご連絡くだされば幸いです。

[参考]
jQueryプラグインをうまいことカプセル化する設計方法
http://blog2.jamadam.com/?p=115

数字を3桁区切りで表示するJavaScript
http://sookibizviz.blog81.fc2.com/blog-entry-100.html