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]

Losing focus() in Safari and IE

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]

Overlapping functions canceling?

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