jquery 实现可编辑div

来源：互联网发布：杭州seo外包服务编辑：程序博客网时间：2024/05/22 04:47

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文件给 Eidt按钮添加事件并实现.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

1 0