Browser problems switching element type to textarea and setting focus

[bugboy]

I'm trying to find a cross browser solution for editing text in a flickr photo caption manor where the text is displayed in a <div> or <a> tag but changes to a <textarea> via JS when clicked.

There are two problems.
1. setting the focus on the new textarea
2. keeping the new text value when switching back to normal text.

Firefox: focuses fine but does not keep the new text value
Safari: focuses then instantly looses focus again, and may not keep new text.
EI: does not set focus but does keep the new text value.

An example page including js can be seen here:
http://macrophotography.com/test.html

Any suggestion or help in figuring out what is happening would be greatly appreciated. I'm a beginner at JS.

Thanks!
Bugboy

[bugboy]

I'm not sure what you mean.

I have this:

<div>My text</div>

then with JS onclick event i change it to this:

<div><textarea>My text</textarea></div>

i then edit the text:

<div><textarea>My text is edited</textarea></div>

then onblur i remove the textarea and keep my edited text:

<div>My text is edited</div>

i have several div's with text. please see my example at the link above

Thanks!

[acoder]

I've not tested what I've suggested, but the idea is simple. If an element with ID "ta1" (the textarea) exists, that means there's one textarea, so remove it and turn it back into text (use parentNode). Once that's done, there's now no element with that ID, so the textarea focus should work.

[bugboy]

I think i'm already doing that with the function:

function a_state1()
{ 
var p = this.parentNode;
p.innerHTML=this.value; 
a_listener1(p.id);
}

The problem arises when the mouse click that blurs the textarea initiating a_state1() ALSO initiates a mousedown event edit_state2() which creates the next texarea. I think that a_state1() is not making the switch before edit_state2() starts ( in FireFox only). Randomly click rows to see the problem, some rows will not drop their texareas.

What i'm looking for is a way to delay edit_state2() until a_state1() has finished the switch. Some type of event order cue that only allows one event to execute at a time then moves a pointer to the next in cue. I swear i've seen this done before for this exact reason but just can remember where...

[acoder]

There's two possibilities here along these lines - probably not the most elegant, but should do the job. One is to simply check that the textarea exists in edit_state. If it does, return. You may not want that, so the second option is to use a timeout to repeatedly check that it doesn't exist. If it does, use timeout again, and if it doesn't, execute the code - a sort of polling.

[bugboy]

Thanks for all your time, acoder. That seems to be a really simple way of doing it, Thanks!

Bugboy

[acoder]

You're welcome. That's what we're here for.