Javascript DOM learning Chapter 2 editing text

Example
This page is an example. Click a paragraph, edit it, and click ready. Your modifications will be displayed.

Problem
The first problem I encountered was: I want to use a text box as the editing area. At first, I did not put the content into the text box. The reader notices that Mozilla's warning is that its value can be set only after the text box is placed in the document.
In addition, the content below Mozilla is not well packaged. I tried several wrap parameters, but the results were not very good.
The most serious problem is to send the modified content back to the server. This is what almost all CMS systems have to do. The reader gave me a lot of clever suggestions. However, because JavaScript cannot be used, I cannot provide a solution. Therefore, please do not send an email to tell you how to find the solution: That may be feasible, but I only want pure JavaScript without the server sideCode.

ScriptCopy codeThe Code is as follows: var editing = false;

If (document. getelementbyid & document. createelement ){
VaR butt = Document. createelement ('click ');
VaR buttext = Document. createtextnode ('Ready! ');
Butt. appendchild (buttext );
Butt. onclick = saveedit;
}

function catchit (e) {
If (editing) return;
If (! Document. getelementbyid |! Document. createelement) return;
If (! E) var OBJ = Window. event. srcelement;
else var OBJ = e.tar get;
while (obj. nodetype! = 1) {
OBJ = obj. parentnode;
}< br> If (obj. tagname = 'textea '| obj. tagname = 'A') return;
while (obj. nodename! = 'P' & obj. nodename! = 'Html ') {
OBJ = obj. parentnode;
}< br> If (obj. nodename = 'html ') return;
var x = obj. innerhtml;
var y = document. createelement ('textarea ');
var z = obj. parentnode;
Z. insertbefore (Y, OBJ);
Z. insertbefore (butt, OBJ);
Z. removechild (OBJ);
Y. value = x;
Y. focus ();
editing = true;
}

Function saveedit (){
VaR area = Document. getelementsbytagname ('textarea ') [0];
Var y = Document. createelement ('P ');
VaR z = area. parentnode;
Y. innerhtml = area. value;
Z. insertbefore (Y, area );
Z. removechild (area );
Z. removechild (document. getelementsbytagname ('click') [0]);
Editing = false;
}

Document. onclick = catchit;

Explanation
Set an editing flag to false. This shows whether the user is editing a paragraph. Of course, it is not initially.

VaR editing = false;

Create a button
Then we create a radey button, which will be required many times later. This requires some advanced script technology, so we should first perform some object detection:

Copy code The Code is as follows: if (document. getelementbyid & document. createelement ){

For modern browsers, create the button:

Copy code The Code is as follows: var butt = Document. createelement ('click ');

His text is:

Copy code The Code is as follows: var buttext = Document. createtextnode ('Ready! ');

Add the text to the button:

Copy code The Code is as follows: butt. appendchild (buttext );

Then add an onclick event for processing.Program:

Copy code Code: butt. onclick = saveedit; 2}

Now the buttons are stored in the butt and can be referenced directly when needed.

Convert P to text box
Later, we will define an onclick event for the entire page. All these events are sent to the catchit () function.

Copy codeThe Code is as follows: function catchit (e ){

First, check whether the user can edit the paragraph normally. If yes, end the function:

Copy code The Code is as follows: if (editing) return;

Then there is support detection:

Copy code The Code is as follows: if (! Document. getelementbyid |! Document. createelement) return;

Then look for the event Source:

Copy code The Code is as follows: if (! E) var OBJ = Window. event. srcelement; 2 else var OBJ = e.tar get;

Now we have the event source, but the problem is that Mozilla considers the text node as the source (rather than the P node we need ). So if the node is not a label (nodetype is not 1), we need to traverse the DOM tree up:

Copy code The Code is as follows: While (obj. nodetype! = 1) {2 OBJ = obj. parentnode; 3}

Now we end with a label. If this is the label of a text box, you can click it to edit it. If it is a link tag, it should be reflected as a link after the user clicks it. In both cases, we do not need this function:

Copy code The Code is as follows: if (obj. tagname = 'textarea '| obj. tagname = 'A') return;

We need to traverse the DOM tree again until we find the P tag or HTML Tag:

Copy code The Code is as follows: While (obj. nodename! = 'P' & obj. nodename! = 'Html ') {2 OBJ = obj. parentnode; 3}

If it is an HTML tag, it indicates that the user clicks out of the paragraph to end the function:

Copy code The Code is as follows: if (obj. nodename = 'html ') return;

After this check, we finally confirm that the user clicks the section we want to edit. Then save the paragraph innerhtml:

Copy code The Code is as follows: var x = obj. innerhtml;

Create a new textarea and save it:

Copy code The Code is as follows: var y = Document. createelement ('textarea ');

Find the parent node of the Section:

Copy code The Code is as follows: var z = obj. parentnode;

Now it is like this:

 
Z | ------------------------------------- | [more] Y (textarea) Butt (button) P [more]
 

Delete the paragraph. Now it looks like the text box and button replace the previous paragraph.

After the text box is inserted, the innerhtml of the paragraph can be placed in the text box. Mozilla does not support adding content to the text box before insertion.

 
Y. value = X;
 

For the convenience of users, focus on the text box:

 
Y. Focus ();
 

Set editing to true.

 
Editing = true ;}
 

Convert text box to P
When the user clicks the ready button, it should be reversed. This is done by the saveedit () function.
Function saveedit () {Get textarea (assume that there is only one textarea on the entire page ):
VaR area = Document. getelementsbytagname ('textarea ') [0] Create a new paragraph and save it:Copy codeThe Code is as follows: var y = Document. createelement ('P ');

Find the parent element of the text box: add the new paragraph to it:Copy codeThe Code is as follows: var z = area. parentnode;

Store the value of the text box in the new paragraph:Copy codeThe Code is as follows: Y. innerhtml = area. value;

Insert the new paragraph before the text box:Copy codeThe Code is as follows: Z. insertbefore (Y, area );

Remove text box:Copy codeThe Code is as follows: Z. removechild (area );

Remove the ready button (similarly, assume there is only one button on the page ):Copy codeThe Code is as follows: Z. removechild (document. getelementsbytagname ('click') [0]);

Set editing to false: the user stops Editing:Copy codeCode: editing = false; 2}

Event
In addition to the function, set an onclick event for the entire page:Copy codeThe Code is as follows: Document. onclick = catchit;

Http://www.quirksmode.org/dom/cms.html
Reprinted please keep the following information
Author: Beiyu (TW: @ rehawk)