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

更新履歴

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 に適用）

ダウンロード

こちらからどうぞ

Permalink | コメント(4) | トラックバック(0)

コメントを書く

cutsea110 2011/07/01 15:23 replaceLabelを指定しない場合にオプションで指定したnullTextが無視されてしまう様です。
常に(none)となってしまうっぽいです。

cyokodog 2011/07/01 18:19 nulltext で指定し試していただけますでしょうか（Tを小文字にしてください）
たぶんうまくいくと思うのですが

cutsea110 2011/07/01 18:39 ありがとうございます。
ああ、はずかしい・・・

cyokodog 2011/07/01 20:38 いえいえ、パラメータの命名に一貫性のないのが悪いんです（キャメルケースだったりそうでなかったり・・）
おかげでリスト編集モード時のバグが見つかりましたので、修正版をそのうち公開しますので、そのVerではどちらのパラメータ名でも使用可能にしたいと思います

スパム対策のためのダミーです。もし見えても何も入力しないでください

画像認証

トラックバック - http://d.hatena.ne.jp/cyokodog/20110620/exinplaceeditor03

リンク元

June 20, 2011