jquery implements an editable div

The HTML is roughly as follows:

<ol id= "Ol_group" class= "List-group list_of_items" >    <li class= "List-group-item Completed_item" >        <div class= "Text_holder" > How is it            ?            <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>

(This is only part of it, but the demo is enough)

Add an event to the Eidt button in the JS file and implement the. Test-holder Div's editable:

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 '/>");        Create input box var oldtext = divedit.html (); Save the original value Inputins.width (Divedit.width ()/3*2);    Set input to div width consistent inputins.val (mtext); Divedit.html (""); Delete the original cell div content inputins.appendto (divedit). focus (). Select ();    Insert the input box code that you want to insert into the DOM node Inputins.click (function () {return false;    });        Handle carriage return and ESC event Inputins.keyup (function (event) {var keycode = Event.which;            if (keycode = =) {var NewText = Oldtext.replace (Mtext, $ (this). Val ());         Divedit.html (NewText);         Set new Value} if (keycode = =) {divedit.html (OldText); return old Value}}). blur (function (event) {            if ($ (this). val ()! = OldText) {var newtext = Oldtext.replace (Mtext, $ (this). Val ());         Divedit.html (NewText);            Set new value}else{divedit.html (OldText); }        }    );});

：

Resources:

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

Copyright NOTICE: This article for Bo Master original article, welcome reprint, reproduced please indicate the source.

jquery implements an editable div