jquery 实现可编辑div

html大致例如以下：

<ol id="ol_group" class="list-group list_of_items">

    <li class="list-group-item completed_item">

        <div class="text_holder">

            how are you?

            <div class="btn-group pull-right">

                <button class="delete btn btn-warning">Delete</button>

                <button class="edit btn btn-success">Edit</button>

            </div>

        </div>

        <div class="checkbox">

            <label>

                <input type="checkbox" class="pull-right">

            </label>

        </div>

    </li>

</ol>

(这仅仅是一部分，但演示效果够了)

在js文件给 Eidtbutton加入事件并实现.test-holder的div的可编辑化：

body.on('click', '.text_holder .btn-group .edit', function(){

    var divedit = $(this).parent().parent();

    if (!divedit){

        return;

    }

    if (divedit.children("input").length > 0) {

        return;

    }

    var mtext = divedit.text().substring(0, divedit.text().length-10);

    var inputIns = $("<input type='text'/>");  //创建input 输入框

    var oldtext = divedit.html();        //保存原有的值

    inputIns.width(divedit.width()/3*2); //设置INPUT与DIV宽度一致

    inputIns.val(mtext);

    divedit.html(""); //删除原来单元格DIV内容

    inputIns.appendTo(divedit).focus().select(); //将须要插入的输入框代码插入DOM节点中

    inputIns.click(function () {

        return false;

    });

    //处理回车和ESC事件

    inputIns.keyup(function (event) {

        var keycode = event.which;

        if (keycode == 13) {

            var newText = oldtext.replace(mtext, $(this).val());

            divedit.html(newText);         //设置新值

        }

        if (keycode == 27) {

            divedit.html(oldtext);         //返回旧值

        }

    }).blur( function (event) {

            if($(this).val() != oldtext){

                var newText = oldtext.replace(mtext, $(this).val());

                divedit.html(newText);         //设置新值

            }else{

                divedit.html(oldtext);

            }

        }

    );

});

效果图：

參考资料：

http://blog.csdn.net/billhepeng/article/details/7409125