By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
446,257 Members | 1,132 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 446,257 IT Pros & Developers. It's quick & easy.

Browser problems switching element type to textarea and setting focus

bugboy
100+
P: 160
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
Mar 7 '09 #1
Share this Question
Share on Google+
25 Replies


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

Expand|Select|Wrap|Line Numbers
  1. p.innerHTML = this.innerHTML
  2.  
To get the actual value of the textarea, use value.

Expand|Select|Wrap|Line Numbers
  1. p.innerHTML = this.value;
  2.  
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
Mar 7 '09 #2

bugboy
100+
P: 160
I need to set the focus to a dynamically added textarea. I'm currently using:
Expand|Select|Wrap|Line Numbers
  1. var textarea=document.getElementById("ta");
  2. 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!
Mar 7 '09 #3

RamananKalirajan
100+
P: 607
Can u pls post the code what u have tried...


Regards
Ramanan Kalirajan
Mar 9 '09 #4

acoder
Expert Mod 15k+
P: 16,027
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.
Mar 10 '09 #5

bugboy
100+
P: 160
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?

Expand|Select|Wrap|Line Numbers
  1. function edit_state()
  2. {
  3. var text = this.innerHTML
  4. this.innerHTML='<textarea id="ta" rows="1" cols="40">'+text+'</textarea>';
  5. var textarea=document.getElementById("ta");
  6. addEvent(textarea,"mouseover",focus1);
  7. addEvent(textarea,"blur",a_state);
  8. }
  9.  
  10. function focus1()
  11. {
  12. this.focus();
  13. }
Mar 10 '09 #6

Dormilich
Expert Mod 5K+
P: 8,639
the correct function call is (should be)
Expand|Select|Wrap|Line Numbers
  1. 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.
Mar 10 '09 #7

bugboy
100+
P: 160
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]

Expand|Select|Wrap|Line Numbers
  1. function edit_state()
  2. {
  3. var text = this.innerHTML
  4. this.innerHTML='<textarea id="ta" rows="1" cols="40">'+text+'</textarea>';
  5. var textarea=document.getElementById("ta");
  6. textarea.focus();
  7. setTimeout(blurevent,1000);
  8. }
  9.  
  10. function blurevent()
  11. {
  12. var textarea=document.getElementById("ta");
  13. addEvent(textarea,"blur",a_state);
  14. }
Mar 10 '09 #8

bugboy
100+
P: 160
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.
Mar 10 '09 #9

acoder
Expert Mod 15k+
P: 16,027
Try:
Expand|Select|Wrap|Line Numbers
  1. setTimeout(setFocus,50);
  2. }
  3.  
  4. function setFocus()
  5. {
  6.    var textarea=document.getElementById("ta");
  7.    textarea.focus();
  8. }
Mar 10 '09 #10

bugboy
100+
P: 160
Hey that works! I have no idea why a delay before setting focus would work?... but it does. Thanks guys!

BugBoy
Mar 10 '09 #11

acoder
Expert Mod 15k+
P: 16,027
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.
Mar 10 '09 #12

bugboy
100+
P: 160
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
Mar 22 '09 #13

acoder
Expert Mod 15k+
P: 16,027
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.
Mar 24 '09 #14

bugboy
100+
P: 160
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..
Mar 24 '09 #15

bugboy
100+
P: 160
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.
Mar 24 '09 #16

acoder
Expert Mod 15k+
P: 16,027
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.
Mar 28 '09 #17

drhowarddrfine
Expert 5K+
P: 7,435
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?
Mar 28 '09 #18

bugboy
100+
P: 160
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?
Mar 29 '09 #19

drhowarddrfine
Expert 5K+
P: 7,435
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.
Mar 29 '09 #20

bugboy
100+
P: 160
I'm not sure what you mean.

I have this:
Expand|Select|Wrap|Line Numbers
  1. <div>My text</div>
then with JS onclick event i change it to this:
Expand|Select|Wrap|Line Numbers
  1. <div><textarea>My text</textarea></div>
i then edit the text:
Expand|Select|Wrap|Line Numbers
  1. <div><textarea>My text is edited</textarea></div>
then onblur i remove the textarea and keep my edited text:
Expand|Select|Wrap|Line Numbers
  1. <div>My text is edited</div>
i have several div's with text. please see my example at the link above

Thanks!
Mar 29 '09 #21

acoder
Expert Mod 15k+
P: 16,027
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.
Mar 29 '09 #22

bugboy
100+
P: 160
I think i'm already doing that with the function:
Expand|Select|Wrap|Line Numbers
  1. function a_state1()
  2. var p = this.parentNode;
  3. p.innerHTML=this.value; 
  4. a_listener1(p.id);
  5. }
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...
Mar 29 '09 #23

acoder
Expert Mod 15k+
P: 16,027
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.
Mar 31 '09 #24

bugboy
100+
P: 160
Thanks for all your time, acoder. That seems to be a really simple way of doing it, Thanks!

Bugboy
Apr 5 '09 #25

acoder
Expert Mod 15k+
P: 16,027
You're welcome. That's what we're here for.
Apr 5 '09 #26

Post your reply

Sign in to post your reply or Sign up for a free account.