「その場編集」を実装
前回はツールチップの実装方法をご紹介しました。
今回
今回の仕組みを考える
この
- 最初はただのテキスト
- クリックをすると,
テキストがinput要素に置き換わり編集可能に。 - input要素からフォーカスが外れたら,
input要素が編集後の文字に置き換わる。 - フォーカス外れた時,
valueの値が空なら最初の値に戻す。
本来であれば,
まずは完成サンプルとソースコードを見てみましょう。
完成ソースコード
jQuery(function($){
$('dd').click(function(){
//classでonを持っているかチェック
if(!$(this).hasClass('on')){
//編集可能時はclassでonをつける
$(this).addClass('on');
var txt = $(this).text();
//テキストをinputのvalueに入れてで置き換え
$(this).html('<input type="text" value="'+txt+'" />');
//同時にinputにフォーカスをする
$('dd > input').focus().blur(function(){
var inputVal = $(this).val();
//もし空欄だったら空欄にする前の内容に戻す
if(inputVal===''){
inputVal = this.defaultValue;
};
//編集が終わったらtextで置き換える
$(this).parent().removeClass('on').text(inputVal);
});
};
});
});
今回の仕組みでは,
使用するHTML
今回はdl,
HTML
<dl>
<dt>名前:</dt>
<dd>技評太郎</dd>
<dt>会社名:</dt>
<dd>技術評論社</dd>
<dt>役職:</dt>
<dd>WEBディレクター</dd>
<dt>得意:</dt>
<dd>jQuery</dd>
</dl>
今回は実装を順をおいながら見ていくことにしましょう。
テキストをクリック後にinput要素へ
まずはテキストをクリックしたら,
その部分のみを実装したサンプルとソースコードを見てみましょう。
テキストをクリック後にinput要素を表示するソースコード
jQuery(function($){
$('dd').click(function(){
var txt = $(this).text();
$(this).html('<input type="text" value="'+txt+'" />');
});
});
DD要素のテキストを変数に入れ,
問題点
しかし,
これはなぜか?
この原因は,
これを回避するための策を次に実装してみます。
編集中のDD要素にclassを持たせる
先ほどの問題を回避するために,
編集中のDD要素にclassを持たせるソースコード
jQuery(function($){
$('dd').click(function(){
if(!$(this).hasClass('on')){
$(this).addClass('on');
var txt = $(this).text();
$(this).html('<input type="text" value="'+txt+'" />');
}
});
});
classを持っているかどうかは.hasClassメソッドを使い,
//classでonを持っているかチェック
if(!$(this).hasClass('on')){
//classでonを持っていなかったら実行
};
$(this).hasClass('on')の前に
これで,