jQuery Ex InPlace Editor に表示テキストの整形機能を追加しました

jQuery

更新履歴

2011-07-05
Ver 0.1.5.1
リスト編集モードで値未入力時のラベル表示不具合等を修正しました
2011-06-20
Ver 0.1.5
表示テキストの整形処理を記述できる replaceLabel パラメータを追加しました。

前回のエントリで、編集データとは別に表示モードでのテキストを書き換えたいとのご要望がありましたので、機能追加しました。
replaceLabel パラメータに記述した関数が、編集確定処理のコールバック関数となり、置換したい値を返すことで表示テキストの書き換えができるようになります。以下の例では数字を３桁単位でカンマ編集し、￥マークを付けた値に編集してます。値が入力されてない場合は、”金額を入力してください”と表示してます。

var commify = function(text){
	var reverseText = function(str){
		return str.split('').reverse().join('');
	}
	return reverseText(reverseText(text).replace(/(\d{3})(?=\d)(?!\d*\.)/g,'$1,'))
}
$('input').exInPlaceEditor({
	replaceLabel : function(api){
		var ret = commify(api.getValue()); //編集内容を取得し整形
		return ret ? '￥' + ret : '金額を入力してください';
	}
});

Demo（input に適用） Demo（a に適用）

ダウンロード

こちらからどうぞ