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();
}