JavaScript DOM Learning Chapter II Editing Text _ Basics

Example
this pageis an example. Click on a paragraph, edit it, and then click Ready. Your changes will be presented.

Problem
The first problem I encountered was that I wanted to use a text box as the editing area. At first I didn't put the content into the text box. The reader found a warning from Mozilla that it was only possible to set its value after the text box was placed in the document.
In addition, the content under Mozilla is not packaged very well. 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, which is what almost all CMS systems have to do. The reader gave me a lot of clever and ingenious advice. However, because it cannot be done through JavaScript, I cannot provide a solution. So please don't email me and tell you that you found a way: that might work, but I just want a pure JavaScript approach that doesn't require server-side code.

Script

Copy Code code as follows:

var editing = false;

if (document.getElementById && document.createelement) {
var butt = document.createelement (' BUTTON ');
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.target;
while (Obj.nodetype!= 1) {
obj = Obj.parentnode;
}
if (Obj.tagname = = ' TEXTAREA ' | | | obj.tagname = = ' A ') return;
while (obj.nodename!= ' P ' && obj.nodename!= ' HTML ') {
obj = Obj.parentnode;
}
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 (' button ') [0]);
editing = false;
}

Document.onclick = Catchit;

Explain
We set a editing flag to false. This is used to show whether the user is editing a paragraph. Of course the initial is not.

var Editing=false;

Create a button
Then we create a Radey button that will take many times to follow. This requires some advanced scripting techniques, so let's do some object detection:

Copy Code code as follows:

if (document.getElementById && document.createelement) {

If it is a modern browser, create the button:

Copy Code code as follows:

var butt = document.createelement (' BUTTON ');

His text is:

Copy Code code as follows:

var buttext = document.createTextNode (' ready! ');

Add this text to the button:

Copy Code code as follows:

Butt.appendchild (Buttext);

Then add an onclick event handler:

Copy Code code as follows:

Butt.onclick = Saveedit; 2}

Now the button is stored in the butt and we can refer to it when needed.

Convert p to text box
Later we will define an onclick event for the entire page. All of these events will be sent to the Catchit () function.

Copy Code code as follows:

function Catchit (e) {

First, check to see if the user is properly editing the paragraph, and if so, end the function:

Copy Code code as follows:

if (editing) return;

Then there is the support test:

Copy Code code as follows:

if (!document.getelementbyid | |!document.createelement) return;

Then look for the source of the event:

Copy Code code as follows:

if (!e) var obj = window.event.srcElement; 2 else var obj = E.target;

Now we have the source of the event, but there is a problem that Mozilla thinks the text node is the source (not the P node we need). So if the node is not a label (NodeType is not 1), we need to walk up the DOM tree:

Copy Code code as follows:

while (Obj.nodetype!= 1) {2 obj = Obj.parentnode; 3}

Now we end with a tag. If this is a label for a text box then the user clicks on it to edit it. If it is a linked label then the user should be clicked as a link to reflect. In either case, we don't need this function:

Copy Code code as follows:

if (Obj.tagname = = ' TEXTAREA ' | | | obj.tagname = = ' A ') return;

We need to iterate up the DOM tree again until we find the P tag or the HTML tag:

Copy Code code as follows:

while (obj.nodename!= ' P ' && obj.nodename!= ' HTML ') {2 obj = Obj.parentnode; 3}

If the HTML tag indicates that the user clicked outside the paragraph, the function ends:

Copy Code code as follows:

if (Obj.nodename = = ' HTML ') return;

After this test we finally determined that the user clicked the paragraph we wanted to edit. Then save the innerHTML of the paragraph:

Copy Code code as follows:

var x = obj.innerhtml;

Create a new textarea and save:

Copy Code code as follows:

var y = document.createelement (' TEXTAREA ');

Then locate the parent node of the paragraph:

Copy Code code as follows:

var z = obj.parentnode;

Now this is the case:

            Z
            |
  ---------------------------------------
  |    |      |      |   |
 [More] Y (TEXTAREA) Butt (BUTTON) P  [More]

Then delete the paragraph. Now it looks like a text box and a button instead of the previous paragraph.

Until now, after inserting the text box, we can place the innerhtml of the paragraph in the text box. Mozilla does not support adding content to a text box before inserting it.

	Y.value = x;

For the convenience of the user to the text box focus:

	Y.focus ();

Then set editing to True.

	editing = true;
}

Converts a text box to P
When the user clicks on the Ready button, it should be reversed. This is done by the Saveedit () function.
function Saveedit () {Gets textarea (this assumes that the entire page has only one textarea):
var area = document.getElementsByTagName (' TEXTAREA ') [0] Create a new paragraph and save:

Copy Code code as follows:

var y = document.createelement (' P ');

Find the parent element of the text box: The new paragraph needs to be added to that:

Copy Code code as follows:

var z = area.parentnode;

Store the value of a text box in a new paragraph:

Copy Code code as follows:

y.innerhtml = Area.value;

Then insert the new paragraph before the text box:

Copy Code code as follows:

Z.insertbefore (Y,area);

To remove a text box:

Copy Code code as follows:

Z.removechild (area);

Remove the Ready button (again, suppose the page has only one button):

Copy Code code as follows:

Z.removechild (document.getElementsByTagName (' button ') [0]);

Then set editing to false: The user stops editing:

Copy Code code as follows:

editing = false; 2}

Event
Outside the function, set the OnClick event for an entire page:

Copy Code code as follows:

Document.onclick = Catchit;

Translation Address: http://www.quirksmode.org/dom/cms.html
Reprint please keep the following information
Author: North Jade (TW: @rehawk)