2013.6.13

【jQuery習作】テキストエリア入力・保存後反映＆再編集の切り替え

COOKPADさんのレシピ登録ページにあるような、テキストエリアに入力・保存後反映され、再編集もできるようなものをjQueryで作ってみました。

サンプル＆ソース

サンプルはこちら
（IE8以上、Chrome、Firefox、Safariで動作確認済です）

挙動の流れは以下です。

テキストクリック
↓
テキストエリアに切り替え
↓
保存＆再編集。取消をクリックすると内容はリセットされる。

HTML


    クリックしてAを入力
    
        

        
        取消

jQuery

$(function() {

    var myTextBox = $(".textBox");
    var myDefault = $(".default");
    var myEdit = $(".editArea");
    var myItem = $(".item");
    var myPreserve = $(".preserve");
    var myBecome = $(".become");
    var myCancel = $(".cancel");
    
    myEdit.css("display","none");
    myBecome.css("display","none");
    
    //最初の表示
    myTextBox.find(myDefault).click(function(){
        var thisParent = $(this).parent();
        $(this).fadeOut("fast",function() {
            thisParent.find(myEdit).fadeIn("fast");
        });
    });
    
    //保存ボタンを押したとき
    myPreserve.click(function(){
        var thisClosest = $(this).closest(myTextBox);
        var textVal = thisClosest.find(myItem).val();
        
        //テキストエリアが空のままで保存されたときは最初の表示に戻し、
        //入力があるときはその表示に変える
        if(textVal == '') {
            $(this).parent(myEdit).fadeOut("fast",function() {
                thisClosest.find(myDefault).fadeIn("fast");
            });
        } else {
            $(this).parent(myEdit).fadeOut("fast",function() {
                thisClosest.find(myBecome).text(textVal).fadeIn("fast");
            });
        }
    });
    
    //取消ボタンを押したとき
    myCancel.click(function(){
        var thisClosest = $(this).closest(myTextBox);
        $(this).parent(myEdit).fadeOut("fast",function() {
            thisClosest.find(myDefault).fadeIn("fast");
        });
        thisClosest.find(myItem).val('');
        return false;
    });
    
    //保存後もう一度編集するとき
    myBecome.click(function(){
        var thisParent = $(this).parent();
        $(this).fadeOut("fast",function() {
            thisParent.find(myEdit).fadeIn("fast");
        });
    });

});

CSS

.textBox {
    width: 180px;
    float: left;
    margin-right: 30px;
}

textarea {
    width: 180px;
    height: 100px;
}

.editArea a {
    margin-left: 9px;
}