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

[chemlight]

The problem with firefox is in your function a_state, you are using:

p.innerHTML = this.innerHTML
 

To get the actual value of the textarea, use value.

p.innerHTML = this.value;
 

Again, this works in Firefox. I don't have IE, and I have yet to test in Safari. Will get back to you with Safari (and maybe Camino?) if I can find out anything else

[bugboy]

I need to set the focus to a dynamically added textarea. I'm currently using:

var textarea=document.getElementById("ta");
textarea.focus();

Firefox: works fine
Safari: focuses then instantly blurs
IE: does not focus at all

I'm a beginner at JS and any example i find using focus() work fine but when i try it myself it doesn't. Any idea what i'm missing here to set focus?

example page here:
http://macrophotography.com/focus.html
focus is set in the function "edit_state()"

Thanks!

[RamananKalirajan]

Can u pls post the code what u have tried...


Regards
Ramanan Kalirajan

[acoder]

The code is in the test page link.

bugboy, try adding a small timeout to allow the focus to take effect, e.g. 10-50 milliseconds.

[bugboy]

Thanks.. I tried the setTimeout() but it didn't seem to do anything.. perhaps i was using wrong. I'm not to sure what function call to delay?

I did however find that adding a mouseover event and creating a focus() function does work. But it doesn't seem to be ideal because it has to execute the listener code whereas a timeout may be lighter weight?

function edit_state()
{
var text = this.innerHTML
this.innerHTML='<textarea id="ta" rows="1" cols="40">'+text+'</textarea>';
var textarea=document.getElementById("ta");
addEvent(textarea,"mouseover",focus1);
addEvent(textarea,"blur",a_state);
}
 
function focus1()
{
this.focus();
}

[Dormilich]

the correct function call is (should be)

setTimeout(textarea.focus,1000);

altough this executes the function after that delay. if I understand it right, you need the delay after the focus() was called.

[bugboy]

Thanks, yes i was doing it wrong! It still doesn't seem to work.. nothing really comes after the focus except adding a listener for a blur event. I tried setting a delay on that and it didn't work.. there is nothing else to delay that i can see.

[sorry it's not in proper code tags.. the site always truncates my posts at the close code tag.. very frustrating.. perhaps someone else can close the code for me]

function edit_state()
{
var text = this.innerHTML
this.innerHTML='<textarea id="ta" rows="1" cols="40">'+text+'</textarea>';
var textarea=document.getElementById("ta");
textarea.focus();
setTimeout(blurevent,1000);
}
 
function blurevent()
{
var textarea=document.getElementById("ta");
addEvent(textarea,"blur",a_state);
}

[bugboy]

Yes the truncated message thing has been happening to me for about a year, sometimes if i edit at repaste the message with proper code tags it works and sometimes it just deletes everything after the close tag again. i think someone from bytes has looked into it for me in the past with no result.

[acoder]

Try:

setTimeout(setFocus,50);
}
 
function setFocus()
{
   var textarea=document.getElementById("ta");
   textarea.focus();
}

[bugboy]

Hey that works! I have no idea why a delay before setting focus would work?... but it does. Thanks guys!

BugBoy

[acoder]

It seems to be a timing bug in IE when setting focus to elements. Setting a small delay before setting focus usually solves the problem.

[bugboy]

I've found an additional complication.. when i add multiple elements with the same function it messes up the functions. I think it's dropping or canceling events when they overlap.

The problem occurs when you click one element while another is in focus. It works fine if you loose focus before clicking next element.

I thought it could be that the textarea id is the same for the next element to focus as the last, but i separated each element and gave each their own id and it didn't fix the problem.

http://macrophotography.com/edit.html

I think i may need something to force the functions to execute in order. I think i've seen that done but i'm not sure where or how.. Or maybe just adding a delay? any suggestions?

Thanks!
Bugboy

[acoder]

Even if giving unique IDs doesn't fix the problem, each element should have a unique ID. Can you show the code where you tried to give each element its own ID.

[bugboy]

Thanks, i really appreciate you looking at this for me..

http://macrophotography.com/uniqueid.html

The editable textarea is created with a click event then removed with a blur event.. before another is made with the same id.. there should only ever be one textarea at a time so what i meant by the textarea's having the same id is that every time a textarea is created it's id is the same as the last.. but should still be unique because the last one should have been removed first.. i though maybe the old one wasn't removed before the new was made so i tried unique id's.. .the quickest way to test that was at the link above..

[bugboy]

it seems to only be a problem in FireFox...

Background: I want the text displayed in a div so that it can have active links but when clicked the text is opened in a textarea to be edited. It needs to be a text area so that it can have multiple lines of text.. but of course you can't display links in a text area so it switches back to a div with <a> tags on blur in order to display any links.

[acoder]

I think a simple solution would be to make sure no element has focus. If any do, remove the focus before changing the clicked div. Use the same ID "ta1" and if it exists, change it back.

[drhowarddrfine]

Do I understand this correctly? He's using the same 'id' for more than one element? This makes it all invalid. How can he select the proper element when there are multiple elements with the same id? Perhaps that's the problem?

[bugboy]

I'm dynamically generating a textarea element to edit text then removing the element on blur leaving the edited text in the div. I'm doing this so that i can display links and text formatting yet still edit it.

The page will have multiple places to edit text and only one will be in edit mode (the dynamically generated textarea) at a time. The generated textarea has the same id because i'm using the same function to generate it. I'm not sure how to pass unique id's to this function as it's called via a setTimeout.. see above. I want it to switch back on blur so that i don't need a "Save" button.

The solution above works in safari and IE but FireFox is not switching off the text area when a second element is clicked while the first is in edit mode. I'm only guessing that FireFox doesn't finish dropping the textarea on blur before it creates the next one thus possibly having two at the same time with the same id messing up the drop function. This is only my beginners guess.

I'm now trying to figure out how to get it to drop focus (as suggested) before initiating the next elements edit mode. perhaps switching focus to a hidden element and then to the new textarea?

[drhowarddrfine]

I may still be following this incorrectly, or not thinking correctly, but once the DOM tree is generated, I'm not sure how much removing of elements you can do but I haven't done any js in a while and tend to forget stuff.

[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.