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

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

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

「その場編集」を実装

前回はツールチップの実装方法をご紹介しました。

今回「Edit In Place」「その場編集」と呼ばれる,テキストをクリックすると,その場で編集できるようにする仕組みを実装してみます。

画像

今回の仕組みを考える

この「その場編集」の仕組みを考えてみましょう。今回の要件は以下の通りにします。

  1. 最初はただのテキスト
  2. クリックをすると,テキストがinput要素に置き換わり編集可能に。
  3. input要素からフォーカスが外れたら,input要素が編集後の文字に置き換わる。
  4. フォーカス外れた時,valueの値が空なら最初の値に戻す。

本来であれば,上記の仕組みの4の後に,PHPなどでデータベースに編集後の情報を送信し,保存するという仕組みになるのですが,今回はその前のところまでの実装方法のご紹介とします。

まずは完成サンプルとソースコードを見てみましょう。

完成ソースコード

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,dt,ddを利用してマークアップしたものを使用してみます。

HTML

<dl>
    <dt>名前:</dt>
    <dd>技評太郎</dd>

    <dt>会社名:</dt>
    <dd>技術評論社</dd>

    <dt>役職:</dt>
    <dd>WEBディレクター</dd>

    <dt>得意:</dt>
    <dd>jQuery</dd>
</dl>

今回は実装を順をおいながら見ていくことにしましょう。

テキストをクリック後にinput要素へ

まずはテキストをクリックしたら,input要素を表示し,そのinputのvalueに最初のテキストの内容を入れる部分です。

その部分のみを実装したサンプルとソースコードを見てみましょう。

テキストをクリック後にinput要素を表示するソースコード

jQuery(function($){
    $('dd').click(function(){
        var txt = $(this).text();
        $(this).html('<input type="text" value="'+txt+'" />');
    });
});

DD要素のテキストを変数に入れ,.html()メソッドを利用してテキストとinput要素を置き換えます。.htmlメソッドを使うことで,DD要素の中身が置き換えられるため,最初のテキストを消したりなどの作業は不要になります。

問題点

しかし,このままでは問題があります。このサンプルを実際に試してみて下さい。input要素になるところまではうまくいくと思います。その後,編集をしようとinputをクリックすると,なんと最初に入っていた文字が消えてしまいます。

これはなぜか?

この原因は,DD要素のテキストをinputのvalueに入れている部分にあります。inputが表示されたあとでも,DD要素のテキストを見に行き,それをinput内のvalueに入れ表示させているからです。inputに置き換わった後は,テキストが無いので,変数にはテキストが何も入っていない状態が代入され,それがvalueになって再度inputごと再度置き換わってしまうのです。

これを回避するための策を次に実装してみます。

編集中のDD要素にclassを持たせる

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

編集中の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')の前に「!」をつけることで,否定表現にしているため,$(this).hasClass('on')がtrueではなかったら・・・というコードになります。

これで,inputの中身が消えなくなりました。

著者プロフィール

長谷川広武(はせがわひろむ;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/

コメント

コメントの記入