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 (Mtex
                T, $ (this). Val ());         Divedit.html (NewText);
            Set new value}else{divedit.html (OldText);
}
        }
    ); });

Effect Diagram:

Resources:

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