472,331 Members | 1,498 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,331 software developers and data experts.

Browser problems switching element type to textarea and setting focus

bugboy
160 100+
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
25 4996
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
160 100+
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
608 512MB
Can u pls post the code what u have tried...


Regards
Ramanan Kalirajan
Mar 9 '09 #4
acoder
16,027 Expert Mod 8TB
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
160 100+
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
8,658 Expert Mod 8TB
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
160 100+
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
160 100+
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
16,027 Expert Mod 8TB
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
160 100+
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
16,027 Expert Mod 8TB
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
160 100+
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
16,027 Expert Mod 8TB
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
160 100+
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
160 100+
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
16,027 Expert Mod 8TB
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
7,435 Expert 4TB
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
160 100+
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
7,435 Expert 4TB
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
160 100+
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
16,027 Expert Mod 8TB
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
160 100+
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
16,027 Expert Mod 8TB
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
160 100+
Thanks for all your time, acoder. That seems to be a really simple way of doing it, Thanks!

Bugboy
Apr 5 '09 #25
acoder
16,027 Expert Mod 8TB
You're welcome. That's what we're here for.
Apr 5 '09 #26

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

Similar topics

2
by: J Krugman | last post by:
I need guidance on implementing the following functionality in JavaScript: User clicks on a link (or button) in browser window A that brings up...
15
by: lawrence | last post by:
Is this the correct way to test for a method before I use it? createRange() is, I believe, an IE only method. function...
3
by: Robert Oschler | last post by:
I have a textarea element that I have created an onblur() handler for. In the onblur() handler, I check to make sure that they have saved the...
0
by: Vinod. | last post by:
Hi all, I have added browser control to a windows form. I am loading pages having multiple frames. I have noticed that the focus in a text is not...
6
by: libsfan01 | last post by:
hi all! is it possible to change an element type with javacript for example onclick to change a text box to a hidden element or to a textarea? ...
13
by: anil.rita | last post by:
When the user chooses an AV file to play, based upon the type of file, I want to use the default installed media player to play it. I am...
4
by: Duncan Jones | last post by:
I'm almost certain there is no easy answer to this question, but I'd thought I'd just check.... *Ignoring* for a second why I want to do this, is...
10
by: sufian | last post by:
I am new to the world of PHP. Below is my simple PHP file "invite.php" with a form having an image send button (I have to use the image send button...
3
by: blackrunner | last post by:
ERROR in my Query?! ERROR: Element GESCHLECHT is undefined in FORM. i think everything ok. Maby somebody can help me here Element GESCHLECHT...
0
by: tammygombez | last post by:
Hey fellow JavaFX developers, I'm currently working on a project that involves using a ComboBox in JavaFX, and I've run into a bit of an issue....
0
by: tammygombez | last post by:
Hey everyone! I've been researching gaming laptops lately, and I must say, they can get pretty expensive. However, I've come across some great...
0
better678
by: better678 | last post by:
Question: Discuss your understanding of the Java platform. Is the statement "Java is interpreted" correct? Answer: Java is an object-oriented...
0
by: teenabhardwaj | last post by:
How would one discover a valid source for learning news, comfort, and help for engineering designs? Covering through piles of books takes a lot of...
0
by: Naresh1 | last post by:
What is WebLogic Admin Training? WebLogic Admin Training is a specialized program designed to equip individuals with the skills and knowledge...
0
jalbright99669
by: jalbright99669 | last post by:
Am having a bit of a time with URL Rewrite. I need to incorporate http to https redirect with a reverse proxy. I have the URL Rewrite rules made...
0
by: antdb | last post by:
Ⅰ. Advantage of AntDB: hyper-convergence + streaming processing engine In the overall architecture, a new "hyper-convergence" concept was...
0
by: Matthew3360 | last post by:
Hi there. I have been struggling to find out how to use a variable as my location in my header redirect function. Here is my code. ...
0
by: AndyPSV | last post by:
HOW CAN I CREATE AN AI with an .executable file that would suck all files in the folder and on my computerHOW CAN I CREATE AN AI with an .executable...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.