もっと便利に!jQueryでラクラクサイト制作(実践サンプル付き)

第17回 「その場編集」を実装する

この記事を読むのに必要な時間:およそ 7.5 分

focusが外れたらテキストに戻る

先ほどの問題を回避するために,今回は編集中のDD要素,つまりinput要素に置き換わった後のDD要素に「on」というclassを持たせて,そのclassを持っている間は新たにinputで置き換わらないようにします。

focusが外れたらテキストに戻るソースコード

jQuery(function($){
    $('dd').click(function(){
        if(!$(this).hasClass('on')){
            $(this).addClass('on');
            var txt = $(this).text();
            $(this).html('<input type="text" value="'+txt+'" />');
            $('dd > input').focus().blur(function(){
                var inputVal = $(this).val();
                $(this).parent().removeClass('on').text(inputVal);
            });
        }
    });
});

inputに対して,最初に.focus()メソッドが入っているのですが,これはinputが表示されたらすぐにその編集部分にフォーカスするようにしているためです。

そしてフォーカスが外れたら,DD要素から「on」のclassを外し,編集後の値を.text()メソッドを使い,改めてDD要素の中身を置き換えます。

ここまででほぼ完成なのですが,全部消した場合(inputを空白にした場合⁠⁠,元に戻す機能も加えます。

空白なら元の内容に戻すソースコード

if(inputVal===''){
    inputVal = this.defaultValue;
};

「this.defaultValue」はinputに元々入っていたvalue値になります。今回の場合,inputが表示された時点のvalue値が再度表示されます。

これでとりあえず,予定していた仕組みは全て実装できました。

おまけ1:初期の値に戻す

ここからは今回の仕組みにちょっとした機能を盛り込むおまけです。

inputで値を変化させた後でも,元の内容に復元したいなんてことも想定されると思います。その場合,あらかじめ最初のテキスト内容をどこかに保持しておき,リセットを押した時に,その保持していた内容でもとに戻すということを組み込んでみます。

リセット機能を組み込んだソースコード

jQuery(function($){
    //一つ一つの内容を保持するためeachを利用
    $('dd').each(function(){
        var backup = $(this).text();
        //.data()を利用して最初の内容を残しておく
        $(this).data('backup',backup)
            .click(function(){
            if(!$(this).hasClass('on')){
                $(this).addClass('on');
                var txt = $(this).text();
                $(this).html('<input type="text" value="'+txt+'" />');
                $('dd > input').focus().blur(function(){
                    var inputVal = $(this).val();
                    if(inputVal===''){
                        inputVal = this.defaultValue;
                    };
                    $(this).parent().removeClass('on').text(inputVal);
                });
            };
        });
    });
    //リセットボタンをクリックで最初の状態に戻す機能
    $('button').click(function(){;
        $('dd').each(function(){
            var backup = $(this).data('backup');
            $(this).text(backup);
        });
    });
});

個々のテキストを.data()で保持させておくため,.each()を利用します。また,最初に.data()で最初のテキスト内容をそれぞれのDD要素に保持させ,リセットを押した時に,その保持した内容で元に戻す機能にしました。

これで,入力内容を間違えたりしたときに,元に戻せることができるようになります。このような仕組みを入れておくことで,編集する人もミスを心配することなく,編集をすることができるようになります。

おまけ2:内容に変更があった時だけリセット

先ほどのおまけ1で実装したリセット機能は,最初の状態から変化したときにだけクリックできるようにしておくこともできます。今回の最後に,それを実装してみましょう。

変更があった時だけリセットできるソースコード

jQuery(function($){
    $('dd').each(function(){
        var backup = $(this).text();
        $(this).data('backup',backup)
            .click(function(){
            if(!$(this).hasClass('on')){
                $(this).addClass('on');
                var txt = $(this).text();
                $(this).html('<input type="text" value="'+txt+'" />');
                $('dd > input').focus().blur(function(){
                    var inputVal = $(this).val();
                    var backup = $(this).parent().data('backup');
                    if(inputVal===''){
                        inputVal = this.defaultValue;
                    };
                    $(this).parent().removeClass('on').text(inputVal);
                    //.data()の内容と比較し変化したていたらクリックできるように
                    if(backup !== inputVal){
                        $('button').removeAttr('disabled');
                    };
                });
            };
        });
    });
    //リセットボタンは最初はクリックできないようにdisabled状態に
    $('button').attr('disabled','disabled')
        .click(function(){;
        $('dd').each(function(){
            var backup = $(this).data('backup');
            $(this).text(backup);
        });
        //リセットした際は再びクリックできないように変更
        $(this).attr('disabled','disabled');
    });
});

変更内容を,最初に保持させた.data()と比較し,相違があればリセットボタンがクリックできるように.removeAttr()でdisabledの属性を削除します。また,一度リセットした後は再びクリックできないようにdisabled属性をつけます。

これで,リセットも必要な時だけ機能するようにできました。

おまけも以上です。

今回ご紹介した以外にも,つけておくといい機能もありますので,実装前にきちんとユーザーの事を考えてUIを実装するようにして下さい。

著者プロフィール

長谷川広武(はせがわひろむ;h2ham)

1984年生まれ。出版会社勤務でWeb製作・運用更新の経験を経て,2009年より株式会社24-7に入社。Webサイトの運用更新業務を中心に制作業務を行う。各種CMSのカスタマイズやjQueryを利用したUI設計などを得意とする。ブログではjQueryや日々の思いなど書いたり,自作のjQueryプラグインなどを公開している。

http://h2ham.seesaa.net/


徳田和規(とくだかずのり;5509;nori)

マインドフリー株式会社,ディレクター。Web製作会社にてHTML/CSSコーディングなどの業務を行いながらAjax/JavaScriptに興味を持ち,ブログで自作のjQueryプラグインなどを公開する。2009年9月からマインドフリー株式会社に参加。

http://moto-mono.net/