Edit text

See sections 8D and 8E of the book for an explanation of the methods and properties
used in this script.

The TEXTAREA behaves strangely in Explorer 5 on Mac: it falls over the other elements,
instead of stretching up the page, and initially not all text is shown. Move your mouse up to see
all the text. It doesn't register hard returns, either.

On this page I give a script for updating a page which can be very useful in a content
management system. Click on any paragraph and you can edit the text. When you're done, press the button and
the new text shows up normally.

Example

This entire page is the example. Click on any paragraph, edit it, then press 'Ready'. Your changes will
show up in the page.

Problems

First of all some problems I encountered. I want to use a textarea as the edit field. First I
didn't get the content into the TEXTAREA.
An alert reader discovered that Mozilla needs the value to be set
after inserting the textarea into the document.

Besides, the content doesn't wrap nicely
in Mozilla, it retains the hard returns from the source code. I experimented with several
values of the WRAP attribute, but doing nothing gave the best result in the end.

The worst problem is sending the altered text back to the server, something
any content management system will want to do.
Readers have sent me various ingenious suggestions to do this.
However, since it cannot be done through JavaScript (yet) I don’t treat the solution to
this problem on my site. So please don't mail me that you found this or that way to do it:
it's certainly possible, but I'm only interested in a pure JavaScript solution without any server
side scripts.

Now we have the target, but a problem is that Mozilla considers the text node (and not the
containing P) to be the target. Therefore we go up through the DOM tree as long as the current node is
not a tag (as long as its nodeType is not 1).

while (obj.nodeType != 1) {
obj = obj.parentNode;
}

Now we have ended up with a tag. If this is the textarea tag the user has clicked in the edit
box to edit the text. If it's a link, it should be clickable as usual. In these cases nothing
should happen so we end the function.

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

Once again we go up through the DOM tree to find either a P or the HTML tag as the ultimate
ancestor of the target of the click.