Click on text to become editable text

method One (JS control):
First Find out what we do with this work:
1, click on the text to create a text box (input),
2, the contents of the original text in the text box;
3, When we click on another area, the text box becomes non-editable text,
4, the text should be modified after (if any);
figuring out the principle so it's easy to implement, with source code:

<!
    DOCTYPE html>  
In this code, you start assigning this to the variable TD because you need to turn the text box into text when you click somewhere else, and the HTML () function is used to set or return the HTML content within the DOM element that matches the current jquery object. The purpose of this function is to set or get the innerHTML property value of a DOM element. This means that the form element cannot use the HTML () method, so the value of this is stored in an intermediate variable.
Method Two:
Contenteditable is an attribute in HTML. When you set contenteditable= ' True ' for HTML, you can open the editing mode for that element.

<p contenteditable = "true" > This is a text that can be edited </p>